This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I want to customise the scroll bar.
According to this: http://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430
you can do it using -webkit-scrollbar. However I cannot seem to find anywhere which browsers support this feature including caniuse.com.
Can someone please tell me where I can find out which browsers support this feature!
As it says -webkit- I assume it works on safari and chrome. But even then which "versions" of these browsers does this work on? What about andriod/ chrome mobile browsers .
Thanks!
You can for IE and Webkit browsers but Firefox would require a JS solution - and if you bother to do it in JS, it doesn't really need you to do it in CSS as well.
An example of a JS scrollbar jQuery plugin.
Edit: Mobile browser - you apparently can style these but I haven't noticed them styled at all, nor did I even know my phone had scrollbars until I just checked. This plugin seems to be able to style them.
Related
I am developing the website with React JS and Bootstrap, also it uses pure CSS, and inline Styles.
It works well on Chrome browser, but on the Safari browser, the margin and padding between cards breaks and removed.. 😟
I have learnt there are some solutions like webkit for the styling of various browser (Chrome, Safari, Firefox, etc...).
But I am not sure this will be the right solution for this article.
Is there anything to solve the CSS issue on various browser?
Thank you.
This question already has an answer here:
SVG animation bug in safari 11
(1 answer)
Closed 5 years ago.
I have a basic SVG log, and embedded in it I have some simple CSS animation. It's rotating an object, and making the middle of the rotation the center of the object.
It looks and works fine on Chrome / Safari in iOS10, but when you open it in iOS11 Safari the rotation is completely mad.
Can anyone help suggest why / how to fit it?
The logo can be seen here:
http://www.mediplacements.com/live2/img/logotest.svg
When something seemingly standard work on older browsers and not in newer ones, you should check for your element's adherence to standards.
The W3C validator indicates there are 3 errors in your SVG; you should try again after fixing them.
Edit: Okay, now that it's fixed. Have you checked SVG animation bug in safari 11 ?
I just tried what's suggested in the linked question, and it fixed it.
Simply add transform-box:fill-box; to your Swishes' CSS.
It tells Safari to behave like Chrome on an undecided point of the standard, namely whether transform percentage values refer to the bounding box or the parent.
FYI, the problem you describe also happens on Firefox.
So I designed this in CSS, the idea is to have a header and the rest as scrollable content.
(there's a link to a live demo at the bottom)
Alas, in Safari it is broken and looks like this:
As you can see, the height of the header is miscalculated, causing the green box to overflow.
I narrowed down the problem to a wrong calculation of flex-basis of the header. Or so I believe.
Live demo here: http://jsbin.com/zusavefoqu
Any idea how to fix it?
Thanks!
You may need to add vendor prefixes.
Currently, flexbox is supported by all major browsers, except IE 8 & 9.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Also, it seems like there are two problems with your layout in Safari:
the header overflow, and
the vertical scrollbar on #more is missing.
For a list of common flex bugs and their workarounds see this page: Flexbugs.
I have a requirement to change css from did scrollbars. I know it is possible doing so for IE, Safari, Chrome but as far as I researched for Firefox it was not possible.
I wondering if it is currently available (such a basic studip feature right?) for Firefox without using third party implementation
thanks
Unfortunately, as of this writing there's no way to use CSS to customize Firefox scrollbars.
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank