Problem mit CSS-transform und Browser-Kompatibilität

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/problem-mit-css-transform-und-browser-kompatibilitt_245245/page_1 - zur Vollversion wechseln!

schizo schrieb am 16.01.2016 um 19:30

Ich hab vor etwa 3 Jahren eine Seite geschrieben, bei der ein um 90° gedrehter Text angezeigt wird. Seit ~einem Monat wird der Text jedoch nicht mehr gedreht angezeigt. Jedoch hab ich leider keine Ahnung, womit das zusammenhängen könnte.

Hat jemand einen Tipp, wo ich zu suchen beginnen könnte?

Code: CSS

.verticalText
{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;

    /* Safari */
    -webkit-transform: rotate(270deg);
    /* Firefox */
    -moz-transform: rotate(270deg);
    /* IE */
    -ms-transform: rotate(270deg);
    /* Opera */
    -o-transform: rotate(270deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    transform: rotate(270deg);

    writing-mode: tb-rl;
    filter: flipv fliph;
};

Code: HTML

<th><div class="verticalText">Punkte</div></th>

kleinerChemiker schrieb am 16.01.2016 um 20:09

In allen Browsern?

schizo schrieb am 16.01.2016 um 20:29

Ah, danke für den Hinweis - im Opera 34 funktionierts.
Im FF 43 und IE 11 hab ich jedoch das Problem.

Hats im IE da irgendeine Änderung gegeben, die vom FF übernommen wurde?

kleinerChemiker schrieb am 16.01.2016 um 22:30

Kenne mich da nicht so aus, hab nur unlängst das gelsesen: http://www.heise.de/newsticker/meld...nz-3063924.html

Keine Ahnung, ob das damit zu tun haben kann.

11Fire01 schrieb am 17.01.2016 um 07:58

hast du die seite für jemanden geschrieben, welcher sie drei jahre in verwendung hatte?

dann würde ich dort suchen, wo etwas verändert wurde - in den letzten drei jahren :_D. Hast du den code mal alleine getestet auf einer anderen index.html?

edit: vllt ist es jedoch der smiley mitten im code :cool:

edit2: writing-mode: tb-rl; <- wenn ich das lösche ists vertikal

mat schrieb am 17.01.2016 um 11:47

Es gibt auch multiple filter-Statements. IE wird nur das letzte Statement verarbeiten und ignoriert damit das XImageTransform. Abgesehen davon solltest du für IE10+ keine filter mehr verwenden. Wenn du ältere IEs unterstützen möchtest dann mach ein eigenes Stylesheet mittels IE-Weiche.

-=Willi=- schrieb am 17.01.2016 um 12:01

Code: CSS
writing-mode: tb-rl;

ist der Verursacher. Das Problem hat übrigens nichts mit PHP zu tun

mat schrieb am 17.01.2016 um 12:28

Fixed.

schizo schrieb am 17.01.2016 um 16:32

Zitat von -=Willi=-
Code: CSS
writing-mode: tb-rl;
ist der Verursacher. Das Problem hat übrigens nichts mit PHP zu tun .

Thx das wars. Das es sich um kein PHP Problem handelt is mir nachher auch aufgefallen, allerdings war ich zu faul, um den Threadtitel zu ändern :P

Warum tb-rl einzug gefunden hat kann ich leider nicht mehr nachvollziehen. Die Seite lief jedoch nur auf meinem Server und es hatte sonst niemand Zugriff auf das Script. Auch in den Backups finde ich den String. Hat jemand eine Erklärung parat, warum das Problem erst jetzt aufgetreten ist?
Ich bild mir ein, dass ichs damals auch im IE getestet hab und im Firefox hats eben bis vor kurzem noch funktioniert.

-=Willi=- schrieb am 17.01.2016 um 17:17

Keine Ahnung warum das erst jetzt aufgetreten ist. Updates könnens ja eher nicht gewesen sein weil "writing-mode: tb-rl" laut MDN und Google veraltet und ein Hack für <=IE7 ist. ¯\_(ツ)_/¯

kleinerChemiker schrieb am 17.01.2016 um 18:16

Gab scheinbar Änderungen mit FF 43.
https://developer.mozilla.org/de/do...SS/writing-mode

schizo schrieb am 17.01.2016 um 18:28

Das würd sich auch zeitlich mit dem release decken, also dürfte das wohl der Grund sein.
Danke für die Hilfe.