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
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.