I have a case where the CSS 3 transition behaves differently in Firefox than in Chrome or Safari. The example can be found at http://jsfiddle.net/inuwan/StKVQ/1/
I have 3 implementations that are slightly different, only the 2nd one (move2) will work in Firefox properly. I have a div that I am transitioning left off-screen and then changing its contents and then transitioning the same div to the middle of the screen from right off-screen.
In case 1 (move1) - works in Chrome/Safari only. The div transitions correctly left off-screen. However in Firefox when transitioning the div back to the middle of the screen, it does not slide in but simply just appears.
In case 2 (move2) - code that removed a css class so that an element will transition to the left from right off-screen was inline in case 1. In case 2 that code has now been wrapped in an additional setTimeout with a 2 second delay. Now works in Firefox, Chrome, and Safari.
In case 3 (move3) - Same as case 2 but added a document.body.style.overflowX = 'hidden' so that the horizontal scrollbar is not visible and changing as we transition the div. This causes the transition of the div left off-screen to not slide in Firefox, the div simply dissappears.
Is there a reasoning behind the difference or its just one of those quirky things you have to be aware of?
Related
So as far as I'm concerned, overflow:hidden does hide the scrollbar, but makes it impossible to scroll (at least scrolling doesn't work in Firefox).
I have a scroller-slider on my homepage - it scrolls automaticaly to lower full-screen elements one by one and then comes back to the first element and starts over. It looks really nice in my opinion, but the scrollbar is visible - I would like to make it invisible. With overflow: hidden the scrolling mechanism doesn't work.
Any idea how to do it?
You can hide scrollbar with CSS - wrap your scrollable container into another one with overflow:hidden and less height/width (depending on scroll you want to hide - vertical or horizontal one). This way helps if you have static container/content sizes. If container can be resized or size depends on content - you will have to use JS solution to calculate container size.
The situation:
Parent div: 300px
Child 1: 50px width, 5 px border
Child 2: 232px width, 8px margin left
Works fine in chrome and IE, but Safari and firefox drop the second one to the new line. Any reason for this? If I remove 1 px to the overall, like having a 7px left margin, they fit into place. Also, measurements match perfectly in firebug, so I don't see why thew two are not fitting in the same line.
Try removing all other padding or margin from Parent div and children. These are caused from default browser styles. (or use CSS Reset to do this for all your elements)
Also, as a note, Safari and Opera are a little bit lying about measurements if you have a decimal number. They round up or down, they are not so exact like Firefox or Chrome.
Background
I have a standard three column layout where the first column is floated left, and the third column is floated right. The first column needs a full-height background.
This layout is for a template, so any of the three columns could have the longest content.
I can't change markup source order, so display:table solutions are not possible.
I can't add any DOM nodes.
The layout is centered with a minimum and maximum width, so I can't attach a vertically-repeating background image to the page with the built-in background color.
It needs to look OK in IE7, but IE8+ needs support.
Solution
To achieve the full-height left column, I created a pseudo-element on colLeft. That pseudo-element has fixed-positioning set to the viewport bottom, 100% height, and placed behind the left column. This solution is awesome because:
IE8+ supports pseudo-elements.
The pseudo-element is attached to the left column, so if the template doesn't have a left column, the background naturally isn't there.
By not setting a left or right attribute, the fixed-positioned pseudo-element stays with the left column (good for the centered layout).
Here's an example on CodePen.
(Make sure that the Document Mode is following the Browser Mode when viewing CodePens in IE).
Problem
In IE8 the full-height left column background only extends down to the initial viewport bottom (the fold).
I created another test with a new leftColBg node instead of the pseudo-element. This works as expected in IE8, meaning that the fixed positioning should work.
Here is the best explanation that I can find on IE8 and generated content: Why does a filter gradient on a pseudo element not work in IE8?
I think IE8 is incorrectly positioning the generated content, because it's not an "object" that contains content. Can anybody better explain this IE8 bug? Is there a fix?
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.
In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.