Anybody familiar with this bug with box-shadow in CSS3?
It renders ok at first. But when scrolling the page up and down(so the shadows goes in and out of visible area) the shadows from the horizontal lines does error and needs to be reloaded to render right. I experience this only in Opera, and not in IE(where I use css3pie.com).
Take look at this example: http://www.gatzschmann.no/beta/
Anybody got a clue why? This does not happen when viewing other sites using box-shadow.
Regards
Petter Andreas
This is a redraw painting bug in Opera. We're aware of this issue and we'll fix it as soon as we can.
Related
I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.
This one has me stumped. I've used Flexslider with no issues many times, but with a site I'm building now it just refuses to work properly.
The last slide will show on load and stay visible until it has cycled through all of them, at which point things will start working properly.
I've tried all sorts of things, reducing it down, but can;t seem to figure it out. The only thing that changes this behavior is if I change the animation to slide instead of fade. But I definitely want fade. And I definitely want to figure out why this is happening.
It seems like it could be a CSS issue, but I can't find it.
Here is what I am working on:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/
EDIT:
I made a couple of super reduced test cases, with just basic HTML, the Flexslider CSS/JS, and jQuery being loaded, nothing else, and the bug persists.
With fade animation, has the bug:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html
EDIT 2
I am an idiot. I changed the class name of the container from "flexslider" to "hero", but did not update the flexslider.css to reflect that. [sigh]
Thanks for looking.
user1910673 got it right!
the following CSS..
.slides li {display:none}
..fixed my fading issue!
I wish I could upvote but don't have 15 reputation.
I had this problem but it was not to do with my css. I found this article helpful:
http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/
It says to set "slideToStart" to your last slide. ie. If you have 7 slides then start it at 6. this fixed my problem.
It is not an ideal fix but it worked for my purposes.
EDIT:
Sorry, better fix was making sure that my slides had display:none
Then it doesn't matter what slide you start on.
so turns out it was my css.
I have an unordered list which is set to display block. Inside that UL I have 4 li elements which are floating.
There is an issue when displaying it in Safari and therefore on iphone and ipad. The issue is that the inner element is inset slightly by the shadow:
but it displays fine in Chrome
Any ideas??
Thanks
Phil
The problem CAN be as follow..
You probably don't saw it coming but do you use a border radius?
The chrome version has 1 pixxel padding on the top/left/right side which can output differently on your screen..
underneath can be helpful if you use a browser reset in your stylesheet
http://meyerweb.com/eric/tools/css/reset/index.html
This will reset all browsers to the same index and from there start styling and mostly it will work!
I've implemented flexslider before, but this time it is not resizing when I view it in i-phone or i-pad. Also its not working when I'm resizing my browser window.
Please suggest any workarounds..
For now I've made it work by adding media query in flexslider.css file.
Thanks in advance for any help.
Finally I got it, the problem was because of Bootstrap framework. Elements with classname "span1/2/3.." in bootstrap don't resize beyond a fix browser width, even when using fluid structure. Because of that my flexslider div was not getting resized.
I just changed the fixed with of .span class from "px" to "%" and it started working.
http://www.crtaci.info/
I have some absolutely positioned menu in footer.
Tested in FF 3.5.3, Safari, IE8, Chrome... But in Opera I'm getting a big gap below that menu in the footer.
ps title is margin problem, because I think it is some margin issue... :)
Opera has too small a market share for me to design specifically for it, but this page has a solution that should work, but it doesn't work on Opera when you resize.
http://www.electrictoolbox.com/html-css-footer/
You may want to look at what the author does, and see if you can understand what you are doing differently.