I assigned a column-count:2 to a div, but when I test the responsive to the browser (Google Chrome version 108.0.5359.99), it breaks and I need to use the tasks manager to close the window.
Is the column-count because when I comment that style line the browser works fine, and in Firefox column-count works.
Any idea or alternative to column count?
Related
When resizing the browser window in order to see how the elements inside the flexbox rearrange themselves, Google Chrome cuts one of them off at a very specific resolution. It works just fine otherwise. This doesn't happen in Safari or Firefox. The flexbox is inside a section with height: auto
I don't know what to try here. This is beyond confusing...
I was checking the background-clip property on w3schools.com and I was playing with different values.
I noticed that on Chrome the background style updates only after window resize and I don't know if it depends by Chrome version (66.0.3359.181).
If you open this page and change values, do you see changes on background style?
I also tried with Edge and Firefox and it works perfectly.
It seems fixed in version 71.0.3578.98.
I have a label and want to let it bounce using CSS3 animation. This works in all latest browsers like a charm.
However, once I add a display:inline to the label, the bounce animation effect doesn't work on Chrome browser. It does work for every other browser like IE11, Firefox and Opera, but for some reason it does not work for the latest Chrome browser. Is this a Chrome bug or is there a good explanation for it?
Here is a test case: https://jsfiddle.net/fuex3nz1/1/
CSS transfroms does not works on inline level elements(I mean only display: inline and label is by default inline level). You can use
.label {display:inline-block;}
For more info about CSS transforms property check it
https://drafts.csswg.org/css-transforms/#terminology
And for inline-level elements check this http://htmlhelp.com/reference/html40/inline.html
I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
I have a problem where Google Chrome on Windows places the first letter of the paragraph differently compared to all the other browsers such as IE, Firefox, Safari. The difference is in the vertical placement - the letter appears higher in all other browsers (the same way in every one of them) but lower in Google Chrome, making styling the first-letter almost impossible.
Do You happen to know why and how this happens?
Could be that the styling of the mother DIV is affecting the paragraph styling but I do not think so.
Also, by the way, the Drop-Caps plugin in WordPress does not work in Firefox.
If you are using relative font sizes (percentage or point based), these are often rendered differently in each browser. See W3 for more info