Fixed position nu functioneaza in IE11

Limbaje de Programare HTML & CSS
,
1

Salutare, am o pagina pe care nu reusesc sa o fac sa ruleze cum trebuie in IE11. Ideea este ca header-ul si sidebar-ul stang nu raman fixe pe wrapper in momentul in care off-canvas sliderul se deschide actionand butonul galben infos+ (asa cum se poate observa in Chome/Firefox).

Am incercat mai multe variante printre care position: expression(fixed); nu a mers; apoi

.header {
  position: absolute;
}

.bar-side {
  position: absolute;
}

dar nu raman fixe se misca pe verticala la scroll, nu am scos-o la capat.
Ce se vede in IE:

Ce se vede in Chrome/Firefox (asa cum trebuie sa ruleze):

Aveti idee cum as putea rezolva problema asta?
vorbim cumva despre un bug de IE? multumesc,

2

Eu văd fix același lucru și în Chrome și în IE 11.

3

Imposibil, ai apasat pe butonul galben din logotext infos+ ?

4

Ah, acum am înțeles problema.

Din punctul meu de vedere, IE se comportă corect, Chrome este cel nătâng:

fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen’s viewport and don’t move it when scrolled. When printing, position it at that fixed position on every page.

5

mda, nu sunt convins ca intra la categoria asta pentru ca sliderul muta wrapper-ul cu totul iar regula de mai sus am un feeling ca este valabila in raport cu wrapper-ul. Mai mult, sa greseasca si Chrome si Firefox? :slight_smile:

6

Se pare că-i un bug de IE totuși.

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

Ăsta funcționează în IE11: Translate3d with fixed element (working) - JSFiddle - Code Playground

Ca workaround ai putea pune la elementul fixed un -ms-transform: translateX( 100px ) (sau cât ai tu nevoie) și speră că nu rezolvă în IE12 sau Edge :smiley:

7

Nu m-ar deranja, l-as face sorcova de instructiuni numai pentru IE dar numai sa mearga. Daca aplic -ms-transform: translateX( ... px ) va sta in pozitia finala nu se misca cu sliderul …din pacate sau imi scapa mie ceva? :slight_smile:

8

Păi trebuie să îi aplici transformarea atunci când este .open, nu tot timpul. De asemenea, va trebui să adaugi și animația și ar trebui să fie ok.

9

Aici ma depaseste, poti rogu-te formula css-ul pentru header si sidebar? asa cum crezi ca ar trebui sa arate ca sa mearga ? :slight_smile: I’m not lazy dar nu sunt atat de pregatit in coding stuff
apreciez

10

În primul rând, este nevoie să faci headerul animat:

.header,
.shiftnav,.shiftnav-wrap {
  -o-transition: -o-transform .5s;
  -ms-transition: -ms-transform .5s;
  -moz-transition: -moz-transform .5s;
  -webkit-transition: -webkit-transform .5s
}

@media screen and (min-width: 767px) {
  .header,
  .shiftnav-open .shiftnav-wrap {
    -webkit-transition-delay:.02s;
    -moz-transition-delay: .02s;
    -ms-transition-delay: .02s;
    -o-transition-delay: .02s;
    transition-delay: .02s
  }
}

Apoi, va trebui să faci translatarea:

.shiftnav-open .header {
    -ms-transform: translateX(590px);
}

Și cam asta ar fi tot.

1 Like
12

si pentru sidebar? :slight_smile: translatarea in felul asta o sa mearga la dus. la intors nu, ar trebui definita cumva si revenire cu acei -590px gresesc?

13

Păi ia încearcă și vezi dacă merge sau nu :smile:

14

Acu ma uit, sunt la planseta :slight_smile: revin

15

Pentru header merge solutia, am incercat sa strecor si sidebar-ul stang in ecuatie insa fara succes. Intre timp am primit o solutie care le danseaza pe amandoua (header + left sidebar) asa cum trebuie in IE11 :smile: mercy frumos oricum pentru interventie apreciez efortul, tot respectul. So daca ajuta pe cineva,

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left{
     left:590px;
  }
}

special thanks to @afelixj

LE: exista o exceptie la css hack-ul de mai sus. Nu va merge cu un slider full-screen cum avem aici in IE11, nu am reusit sa-mi dau seama din ce motiv si cum sa updatez codul daca aveti vreo idee, m-ar ajuta.

1 Like
16

Pai nu ai spus încă dacă ai încercat ce ți-am zis eu mai sus :smile:

17

Am spus mai sus “Pentru header merge solutia, am incercat sa strecor si sidebar-ul stang in ecuatie insa fara succes.” :slight_smile: iar alternativa primita din cealalta sursa merge si pentru sidebar si pentru header mai putin in slidere full screen.

18

Păi și la slider-ul respectiv aplici fix aceeași tehnică aplicată și la header…

19

Am incercat asa cu .fullscreen-container , apoi cu .shiftnav-wrapper apoi cu #wrapper fara un rezultat bun din pacate:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left, .fullscreen-container{   
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left, .shiftnav-open .fullscreen-container{
     left:590px;
  }
}

Cel mai aproape de adevar este varianta aceasta, (e construita separat de sidebar si header doar pentru a evidentia wrapper-ul) ce rezolva problema in pagini cu fullscreen slider insa daca deschid o pagina care nu are fullscreen slider ii va decala contentul cu +590px peste acei 590px existenti (?!) dubios la deschiderea sliderului din stanga actionat de butonul galben infos+, cu riscul de a ma repeta in IE11 vorbesc.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #wrapper{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open #wrapper{
     left:590px;
  }
}

LE: solutia este asta :smile:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left, .forcefullwidth_wrapper_tp_banner{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left, .shiftnav-open .forcefullwidth_wrapper_tp_banner{
     left:590px;
  }
}

special thanks to @afelixj