Closed
Bug 1151622
Opened 9 years ago
Closed 8 years ago
Text in boxes is backwards on http://svsportsleague.com/
Categories
(Web Compatibility :: Site Reports, defect)
Tracking
(Not tracked)
RESOLVED
WORKSFORME
People
(Reporter: marcia, Unassigned)
Details
(Whiteboard: [lib-modernizer] [js] [contactready])
Using the latest 37.0.1, Dev Edition, and latest Beta, the text in boxes on this page is backwards: http://svsportsleague.com/. Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:38.0) Gecko/20100101 Firefox/38.0 ID:20150330004006 CSet: 9e57e9776571 Using Chrome and Safari, the text displays correctly.
Updated•9 years ago
|
OS: Mac OS X → All
Comment 1•9 years ago
|
||
It is backwards only with JS on, and appears normal while the box is hovered over. But with Chromium, when a box is not hovered over, the text is not seen backwards, but shows a sign and the box name. When hovering over the box, it seems to turn over to show the text (too quickly to see if the text was backwards behind the sign and the name).
Comment 2•9 years ago
|
||
(In reply to [:Aleksej] from comment #1) Nightly 2015-04-06-03-02-04-mozilla-central-firefox-40.0a1.ru.linux-x86_64, Chromium Version 41.0.2272.76 Built on 8.0, running on Debian 8.0 (64-bit).
QA Whiteboard: [bugday-20150406]
Comment 3•9 years ago
|
||
The backwards text has backface-visibility: visible. If I remove that style then we look like Chrome.
Comment 5•9 years ago
|
||
So they have two divs: "back" and "front". In source order, "front" comes first, then "back". "back" is the one with the sign and box name, "front" is the one with the text. We're painting the "front" on top of the "back". As you say, the "back" has "backface-visibility: visible". And if we remove that, the rendering is correct. The interesting thing is the selector for that rule. It is: .no-csstransforms3d .sf-icon-box-animated .back So where's "no-csstransforms3d" coming from? The <html> has: class="js cssanimations csstransforms no-csstransforms3d csstransitions" It comes, afaict from this test in the old modernizr version the site is using (as part of jquery-isotope): csstransforms3d: function() { var test = !!getStyleProperty('perspective'); // double check for Chrome's false positive if ( test ) { var vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '), mediaQuery = '@media (' + vendorCSSPrefixes.join('transform-3d),(') + 'modernizr)', $style = $('<style>' + mediaQuery + '{#modernizr{height:3px}}' + '</style>') .appendTo('head'), $div = $('<div id="modernizr" />').appendTo('html'); test = $div.height() === 3; $div.remove(); $style.remove(); } return test; }, This test is relying on what looks to me like a bug in Chrome. Specifically, this rule: @media (-webkit-transform-3d) { body { background: green; } } will actually give the body a green background in Chrome! Per spec, afaict, it should do no such thing. Tab, can you confirm? Anyway, the upshot is that they're sending us and Chrome different CSS because of their broken feature detection, and the CSS they send us is broken. Marcia, do you happen to know a contact for this page by any chance? If not, I can try just digging around their website for one...
Component: Layout → Desktop
Flags: needinfo?(jackalmage)
Product: Core → Tech Evangelism
Version: 37 Branch → Trunk
Comment 6•9 years ago
|
||
Ah, yes, definitely relying on bogus Chrome stuff. See https://code.google.com/p/chromium/issues/detail?id=426644 So this really needs to be fixed by the site, imo.
Flags: needinfo?(jackalmage) → needinfo?(mozillamarcia.knous)
Reporter | ||
Comment 7•9 years ago
|
||
I will try contacting them through a link on their site and will point them to this bug.
Flags: needinfo?(mozillamarcia.knous)
Comment 8•9 years ago
|
||
Thanks Marcia - please change [contactready] to [sitewait] when you've contacted them :) If we're going to spider for this problem - something like this regexp ['"]@media["'][^;]+transform-3d should be a pretty good detection with few false positives - I guess?
Whiteboard: [lib-modernizer] [js] [contactready]
Comment 9•9 years ago
|
||
There are a number of email addresses and a contact form @ http://svsportsleague.com/contact-us/.
Comment 10•9 years ago
|
||
The simplest fix for them would be to update their Modernizr version, the latest version will test first with @supports: https://github.com/Modernizr/Modernizr/blob/a4e41038d850572bc1b02d2fbe1bbffb7b01dbd4/feature-detects/css/transforms3d.js#L25
Comment 11•9 years ago
|
||
Thanks Mike - I'll be scanning for scripts that match this regexp ['"]@media["'][^;]+transform-3d but ignore those that match this one: @supports\s*\(perspective:
Comment 12•8 years ago
|
||
Still broken in 45 & 46 but is working in 47 & 48. Hallvord can you confirm?
Flags: needinfo?(hsteen)
Comment 13•8 years ago
|
||
Yes, seems the -webkit- parts we've added were sufficient to pass Modernizr's test.
Status: NEW → RESOLVED
Closed: 8 years ago
Flags: needinfo?(hsteen)
Resolution: --- → WORKSFORME
Comment 14•8 years ago
|
||
This Compatipede plugin will help flag sites with the Modernizr bug: https://github.com/Asynchq/boar/pull/77/files
Assignee | ||
Updated•5 years ago
|
Product: Tech Evangelism → Web Compatibility
You need to log in
before you can comment on or make changes to this bug.
Description
•