# browser support

Published articles for browser support.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Hack for iOS Safari to display the HTML video thumbnail

DevFeed: [Hack for iOS Safari to display the HTML video thumbnail](<https://devfeed.tech/articles/hack-for-ios-safari-to-display-the-html-video-thumbnail-37277.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/>)

Author: Stanko

Published: 2020-05-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [HTML](<https://devfeed.tech/topics/html.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [edge](<https://devfeed.tech/tags/edge.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [ios](<https://devfeed.tech/tags/ios.md>), [safari](<https://devfeed.tech/tags/safari.md>), [video](<https://devfeed.tech/tags/video.md>)

### AI overview

A tutorial explains how adding the Media Fragment #t=0.001 to a video URL can make iOS Safari preload and display a video frame as its thumbnail before playback. The technique is also reported to work in several desktop browsers and on iOS and Android phones.

### Source excerpt

Mobile iOS Safari doesn't display preview thumbnail until you tap on the video. My go-to solution was to define a poster attribute and move on. But today I learned I could use something called Media Fragments. Media Fragments specify a way of sharing parts of audio and video files by simply adding url params. Browser support varies, but fortunately support for what we need is pretty good. Code # By simply adding #t=0.001 at the end of the video file url, we are telling the browser to skip the first millisecond of the video. When you do this, even iOS Safari will preload and show that specific frame to the user. So the code looks like this: <video> <source src="path-to-video.mp4#t=0.001" type="video/mp4" /> </video> Example # Please note that you need to check the example using iOS Safari to see the difference. Without media fragmentsWith media fragments It is a hacky solution, but I've tested it on desktop Firefox, Safari, Chrome, IE11 and Edge, as well as on iOS and Android phones and it works in all of those.

## Get scrollbar width in JavaScript

DevFeed: [Get scrollbar width in JavaScript](<https://devfeed.tech/articles/get-scrollbar-width-in-javascript-37275.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/get-scrollbar-width-in-javascript/>)

Author: Stanko

Published: 2017-12-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [function](<https://devfeed.tech/tags/function.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [window](<https://devfeed.tech/tags/window.md>)

### AI overview

A JavaScript one-liner calculates the body scrollbar width by subtracting the document's client width from the window's inner width. It returns zero when no scrollbar is shown, including on mobile devices.

### Source excerpt

Another one-liner I love, that returns body scrollbar width. If scrollbar is not shown it will return zero (including mobile devices). function getScrollbarWidth() { return window.innerWidth - document.documentElement.clientWidth; } Click on the button to try it yourself: Get scrollbar width! Browser support # Tested on: Windows: IE9, IE10, IE11, Edge MacOS: Safari, Firefox, Chrome, Opera iOS: Safari, Chrome Android: Chrome

## Supporting Smaller Audiences Through a Browser Support Matrix

DevFeed: [Supporting Smaller Audiences Through a Browser Support Matrix](<https://devfeed.tech/articles/supporting-smaller-audiences-for-maximum-profit-32306.md>)

Original publisher: [Read original article](<https://jack.ofspades.com/supporting-smaller-audiences-for-maximum-profit/>)

Author: Jack Tarantino

Published: 2016-05-13T23:06:31Z

Content type: article

Language: en

Sources: [Jacopo Tarantino](<https://devfeed.tech/sources/jacopo-tarantino.md>)

Topics: [browsers](<https://devfeed.tech/topics/browsers.md>), [Software Engineering](<https://devfeed.tech/topics/software-engineering.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [programming](<https://devfeed.tech/tags/programming.md>), [software-design](<https://devfeed.tech/tags/software-design.md>), [web-app](<https://devfeed.tech/tags/web-app.md>)

### AI overview

The article argues that companies should support smaller user groups through graded levels of browser and environment support rather than treating platforms as simply supported or unsupported. It describes a browser support matrix and explains how excluding users on certain devices or without smartphones can cost businesses customers and prospective hires.

### Source excerpt

or "How I learned to stop worrying and love all browsers the same as long as they came out kinda recently" Time and time again I've seen companies ignore smaller audiences that use their product because those audiences are not the main/target/primary audience. At a recent job they