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)

x86
All
defect
Not set
normal

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.
OS: Mac OS X → All
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).
(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]
The backwards text has backface-visibility: visible. If I remove that style then we look like Chrome.
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
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)
I will try contacting them through a link on their site and will point them to this bug.
Flags: needinfo?(mozillamarcia.knous)
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]
There are a number of email addresses and a contact form @ http://svsportsleague.com/contact-us/.
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
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:
Still broken in 45 & 46 but is working in 47 & 48. Hallvord can you confirm?
Flags: needinfo?(hsteen)
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
This Compatipede plugin will help flag sites with the Modernizr bug:
https://github.com/Asynchq/boar/pull/77/files
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.