css - Dave's Blog

Search

Scrollbars in EdgeHtml WebView and Edge browser

2019 Aug 22, 5:35

The scrollbars in UWP WebView and in Edge have different default behavior leading to many emails to my team. (Everything I talk about here is for the EdgeHtml based WebView and Edge browser and does not apply to the Chromium based Edge browser and WebView2).

There is a Edge only -ms-overflow-style CSS property that controls scroll behavior. We have a different default for this in the WebView as compared to the Edge browser. If you want the appearance of the scrollbar in the WebView to match the browser then you must explicitly set that CSS property. The Edge browser default is scrollbar which gives us a Windows desktop styled non-auto-hiding scrollbar. The WebView default is -ms-autohiding-scrollbar which gives a sort of compromise between desktop and UWP app scrollbar behavior. In this configuration it is auto-hiding. When used with the mouse you'll get Windows desktop styled scrollbars and when used with touch you'll get the UWP styled scrollbars.

Since WebViews are intended to be used in apps this style is the default in order to better match the app's scrollbars. However this difference between the browser and WebView has led to confusion.

Here’s an -ms-overflow-style JSFiddle showing the difference between the two styles. Try it in the Edge browser and in WebView. An easy way to try it in the Edge WebView is using the JavaScript Browser.

PermalinkComments

Tiny browser features: JSBrowser zoom

2018 May 10, 3:49

JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom.

My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can try the whole thing out in my JSBrowser fork.

Slider

I can implement the zoom settings slider as a range type input HTML element. This conveniently provides me a min, max, and step property and suits exactly my purposes. I chose some values that I thought would be reasonable so the browser can scale between half to 3x by increments of one quarter. This is a tiny browser feature after all so there's no custom zoom entry.

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

To let the user know this slider is for controlling zoom, I make a label HTML element that says Zoom. The label HTML element has a for attribute which takes the id of another HTML element. This lets the browser know what the label is labelling and lets the browser do things like when the label is clicked to put focus on the slider.

Scale

There are no explicit scale APIs for WebView so to change the size of the content in the WebView we use CSS.

        this.applyWebviewZoom = state => {
const minValue = this.webviewZoom.getAttribute("min");
const maxValue = this.webviewZoom.getAttribute("max");
const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;

// Use setAttribute so they all change together to avoid weird visual glitches
this.webview.setAttribute("style", [
["width", (100 / scaleValue) + "%"],
["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
["transform", "scale(" + scaleValue + ")"]
].map(pair => pair[0] + ": " + pair[1]).join("; "));
};

Because the user changes the scale at runtime I accordingly replace the static CSS for the WebView element with the script above to programmatically modify the style of the WebView. I change the style with one setAttribute call to do my best to avoid the browser performing unnecessary work or displaying the WebView in an intermediate and incomplete state. Applying the scale to the element is as simple as adding 'transform: scale(X)' but then there are two interesting problems.

The first is that the size of the WebView is also scaled not just the content within it. To keep the WebView the same effective size so that it still fits properly into our browser UI, we must compensate for the scale in the WebView width and height. Accordingly, you can see that we scale up by scaleValue and then in width and height we divide by the scaleValue.

transform-origin: 0% 0%;

The other issue is that by default the scale transform's origin is the center of the WebView element. This means when scaled up all sides of the WebView would expand out. But when modifying the width and height those apply relative to the upper left of the element so our inverse scale application to the width and height above aren't quite enough. We also have to change the origin of the scale transform to match the origin of the changes to the width and height.

PermalinkCommentsbrowser css-transform javascript JS jsbrowser uwp webview win10

Tweet from CodePen.IO

2016 Oct 8, 6:19
Pure CSS Minesweeper! http://codepen.io/bali_balo/details/BLJONk/ 
PermalinkComments

Retweet of Real_CSS_Tricks

2016 Jan 30, 8:30
display: contents;It's new.https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/ …parent (disp flex) child (disp contents) grandchildgrandchild now flex item
PermalinkComments

Retweet of tobiasahlin

2016 Jan 6, 4:21
Wrote about how to use layered animation in CSS to animate objects along a curved path: http://tobiasahlin.com/blog/curved-path-animations-in-css/ … pic.twitter.com/CMw75rs2eO
PermalinkComments

Retweet of ohunt

2015 Sep 16, 1:57
Is your site/app not loading resources in ios9? WebKit now blocks mixed content: You can't load CSS or JS over http from https _ever_.
PermalinkComments

Tweet from David_Risney

2015 Apr 9, 11:21
CSS to render Markdown as unrendered Markdown https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea …
PermalinkComments

Retweet of JustRogDigiTec

2015 Mar 18, 10:48
Xpath in #EdgeHTML using CSS selectors and WGX (Wicked Good XPath) http://blogs.msdn.com/b/ie/archive/2015/03/19/improving-interoperability-with-dom-l3-xpath.aspx … The tech here is amazing. #ICodeReviewedThat
PermalinkComments

Retweet of zoltandulac

2015 Mar 4, 5:21
Great resource. I always wondered what was "animatable" via CSS and what wasn't. Now I know. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties …
PermalinkComments

A Complete Guide to Flexbox | CSS-Tricks

2014 May 22, 1:02

"The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and…"

Great diagrams showing the use of the various flex css properties. I can never keep them straight so this is perfect for me.

PermalinkCommentstechnical css flex

CSS Vocabulary

2014 Apr 17, 4:05

Lovely visualization for learning the names of CSS parts. Great concept and would like to see it applied to other languages.

PermalinkCommentstechnical css visualization

Shout Text Windows 8 App Development Notes

2013 Jun 27, 1:00

My first app for Windows 8 was Shout Text. You type into Shout Text, and your text is scaled up as large as possible while still fitting on the screen, as you type. It is the closest thing to a Hello World app as you'll find on the Windows Store that doesn't contain that phrase (by default) and I approached it as the simplest app I could make to learn about Windows modern app development and Windows Store app submission.

I rely on WinJS's default layout to use CSS transforms to scale up the user's text as they type. And they are typing into a simple content editable div.

The app was too simple for me to even consider using ads or charging for it which I learned more about in future apps.

The first interesting issue I ran into was that copying from and then pasting into the content editable div resulted in duplicates of the containing div with copied CSS appearing recursively inside of the content editable div. To fix this I had to catch the paste operation and remove the HTML data from the clipboard to ensure only the plain text data is pasted:

        function onPaste() {
var text;

if (window.clipboardData) {
text = window.clipboardData.getData("Text").toString();
window.clipboardData.clearData("Html");
window.clipboardData.setData("Text", util.normalizeContentEditableText(text));
}
}
shoutText.addEventListener("beforepaste", function () { return false; }, false);
shoutText.addEventListener("paste", onPaste, false);

I additionally found an issue in IE in which applying a CSS transform to a content editable div that has focus doesn't move the screen position of the user input caret - the text is scaled up or down but the caret remains the same size and in the same place on the screen. To fix this I made the following hack to reapply the current cursor position and text selection which resets the screen position of the user input caret.

        function resetCaret() {
setTimeout(function () {
var cursorPos = document.selection.createRange().duplicate();
cursorPos.select();
}, 200);
}

shoutText.attachEvent("onresize", function () { resetCaret(); }, true);
PermalinkCommentsdevelopment html javascript shout-text technical windows windows-store

Mario 3 recreated with CSS3 animations and media queries (mozilla.org)

2012 Nov 1, 2:48PermalinkCommentscss animation Mario smb3 video-game

The amazing powers of CSS

2012 Jun 20, 3:32

Some fun CSS things including the following:

head { display: block; border-bottom: 5px solid red; }

script, style, link { display: block; white-space: pre; font-family: monospace; }

script:before { content: “”; }

PermalinkCommentscss technical html

Raising the bar on web uploads

2012 Apr 25, 5:00

Flickr’s new HTML5-ish photo upload feature technical overview.

PermalinkCommentstechnical html html5 javascript css3 css flickr file-upload

Hotel Wifi JavaScript Injection (justinsomnia.org)

2012 Apr 5, 3:23

In short, Marriott is injecting JavaScript into the HTML of every webpage its hotel customers view for the purpose of injecting ads (and in the meantime, breaking YouTube).

PermalinkCommentstechnical css html security web internet javascript injection

Cursor:none abuse (trick users into clicking Facebook 'like') (co.uk)

2012 Mar 6, 7:19

Cursor spoofing. Great job!

PermalinkCommentstechnical javascript css html cursor security

HTML5 Table Flipper Experiment

2012 Mar 2, 1:02

The goal of this experiment was to combine the flipping tables emoticons with the Threw It On The Ground video using shiny new HTML5-ish features and the end result is the table flipper flipping the Threw It On the Ground video.

The table flipper emoticon is CSS before content that changes on hover. Additionally on hover a CSS transform is applied to flip the video upside down several times and move it to the right and there's a CSS transition to animate the flipping. The only issue I ran into is that (at least on Windows) Flash doesn't like to have CSS transform rotations applied to it. So to get the most out of the flip experiment you must opt-in to HTML5 video on YouTube. And of course you must use a browser that supports the various things I just mentioned, like the latest Chrome (or not yet released IE10).

PermalinkCommentscss-transform flipping-tables css-transition html5-video technical threw-it-on-the-ground

Using CSS without HTML (mathiasbynens.be)

2012 Feb 20, 6:11

Implied HTML elements, CSS before/after content, and the link HTTP header combines to make a document that displays something despite having a 0 byte HTML file.  Demo only in Opera/FireFox due to link HTTP header support.

PermalinkCommentstechnical humor hack css http html

Bootstrap 2 released

2012 Feb 1, 9:28

An HTML and CSS UI framework - common icons and layout necessary for web apps - all free under Creative Commons BY and Apache 2

PermalinkCommentscss html creative-commons cc technical
Older Entries Creative Commons License Some rights reserved.