0

I've hit the frequently mentioned WebKit bug. The following workaround seems to work in specific instances. However I am not succeeding in finding the valid combinations.

Starting with (shortened. the actual code has 9 child elements to create a carousel):

    input[value="1"]:checked ~ .container .carousel p:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }

I've attempted the syntax suggested in the link

    input[value="1"]:checked + .container + .carousel p:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }

However that disables the toggled action.

* update *
As pointed out, I did not properly specify the problem.

The issue is that the checkbox hack is not working on Android < 4.1 (as far as I can tell).
Using Chrome or Safari (Firefox is not properly functioning with the code, and is being rendered separately) the result of the code can be seen here

Community
  • 1
  • 1
Jerome
  • 5,583
  • 3
  • 33
  • 76
  • I don't see any pseudo-elements here. Changing that descendant combinator to a `+` combinator seems incorrect - it would require completely changing your HTML structure. What exactly is the problem you're facing and what does the HTML look like? – BoltClock Jun 27 '14 at 13:28

1 Answers1

0

See jsFiddle Example. This worked for me

input[value="1"]:checked + .container .carousel p:nth-child(1) 
    { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
HarmonicApps
  • 88
  • 7
  • while your jsfiddle works with the browsers under examination and under Android, that change still does not resolve the disabling of the toggle experienced. So the issue must be higher up. I noticed that your post was very close to my update. Do you see anything fishy there? – Jerome Jun 27 '14 at 15:18
  • Ah, I have access to an Android 4.0.4 and your linked site is jacked up in that browser. Have you heard of http://html5test.com? It shows which HTML5 elements are supported by your browser. Figure is not supported in the default browser of Android 4.0.4. I think this is the problem... – HarmonicApps Jun 27 '14 at 19:54
  • [JSFiddle](http://jsfiddle.net/HarmonicApps/c2HAL/8/) Here I got the first item to display after the cover. All I did was adjust the styles to also look for #carousel .region when looking for #carousel figure. It's not complete, but it might point you in the right direction... – HarmonicApps Jun 27 '14 at 21:04
  • a) thank you for html5test.com (had seen it; it stalls on older versions/browsers, save Dolphin). b) your attempt a bit wowed me; regions not being supported anymore by Chrome nor older Safari/iOS. So I have 3 versions of content: one for Chrome/Safari/iOS/modern windows, a second for FF (since first fails on FF), third for rest. You pulled code from the FF one and somehow pushed it further than I would have expected. However it is the codebase for Chrome/Safari which is generating my checkbox hack is not working on Android < 4.1 question: [jsfiddle] (http://jsfiddle.net/dvo4/P6R3X/) – Jerome Jun 28 '14 at 07:12