The documentations on pointer and any-pointer read pretty similar, as testing whether the user has “a” or “any” pointing device doesn’t make a difference in the scope of this media feature, does it?
I tried the following CSS …
#media (pointer: fine) {body{background:green}}
#media (pointer: coarse) {body{background:red}}
⸻
#media (any-pointer: fine) {body{background:green}}
#media (any-pointer: coarse) {body{background:red}}
… both on a notebook with a connected mouse, and only with its touchpad, as well as a smartphone with only its touchscreen, and with a connected mouse.
In all scenarios, the desktop yielded “fine” (even with its coarse? touchpad) and the smartphone yielded “coarse” (even with a fine? mouse connected), whereas I anticipated:
any-pointer should have yielded fine on the smartphone with the mouse connected
pointer should have yielded coarse on the notebook with only the touchpad available
I hope I just don’t grasp it just yet, but otherwise … is it a bit quirky? Or what are practical scenarios for pointer/any-pointer respectively in regard to style usage and user hardware?
(Why would one need both?)
Related
I've read through dozens of SO threads on how to get orientation on Safari browsers. Almost every single answer recommends using window.orientation. This is documented as the recommended method here, since screen.orientation is not available on Safari, which is indicated on the MDN docs (even though it's marked as deprecated).
Great, so it just seems I have to check window.orientation if Safari is the detected browser. But that always returns undefined. I've tried checking all available functions when I inspect window inside a Safari browser, but there's no mention of any function that contains the word "orientation" in it.
I've inspected the attributes available within window.screen, but there is no mention of anything related to orientation or even the angle of the screen.
Cool. So how does one go about determining the orientation on this amazingly developer-friendly browser? I'm open to super obscure hacks, as that's been my go-to for most Safari functionality in the past.
Im a new developer, and I just finished my first site. Works fine in all browsers, except safari.
Unfortunately I didn't install a copy of safari while I was developing it, so these issues went unnoticed. I did check every other large browser tho.
Figuring, if it worked in IE it should work in anything else...
Please open up www.enniya.net in safari, and than in chrome or some other browser to see what I am taking about.
By looking at it I do have a theory.
The background, font, colors, transparencies of divs, border colors, thats all their, but the positioning is destroyed.
But the logo position is correct, so my first theory is that
90% of the content is positioned with vw and vh
while the logo actually uses % for positioning...
Except that the latest readings tell me the newest versions of safari understand VH and VW ??? So I dont know.
If you need to see my code let me know, I didn't provide it initialy because Im not really sure what specifically I could provide that would solve this problem.
I'm currently adapting my personal engine to Vulkan and I want to reimplement transparent windows, which I already had with OpenGL.
I thought that all I need to do is to select the correct color format ( with alpha channel ) and to set the compositeAlpha property of VkSwapchainCreateInfoKHRto VK_COMPOSITE_ALPHA_POST_MULTIPLIED_BIT_KHR.
However clearing the window with a full transparent color doesn't provide the expected results. It's fully opaque.
Of course my window system, which didn't change since I had OpenGL, supports it and when I just disable the rendering I also can't click through at the supposed position of the window, this tells me that it's there.
Are there any other required changes to make this work?
Some infos
The image format is VK_FORMAT_B8G8R8A8_UNORM and I oriented the vulkan setup as found in Sascha Willems examples.
That capability (as most others) have to be queried before usage about whether it is supported. Otherwise it is invalid to use it.
This particular feature is queried by vkGetPhysicalDeviceSurfaceCapabilitiesKHR as pSurfaceCapabilities->supportedCompositeAlpha. It is a bitfield/flag-set, so more than one mode or none can be supported.
I think the result/feature support may be influenced by the VkSurface. That is, how the platform window was created. Or maybe the driver maker simply did not implement it yet (despite that feature being supportable).
Since it worked for you before in OGL, the later is more likely. But couldn't hurt to play with the platform window creation parameters...
Dunno if this is still relevant, but I got it working with transparent windows through GLFW. (If you are not using GLFW you may dismiss this answer!)
As stated here, there are two ways of obtaining window transparency: framebuffer transparency (alpha bit), and window transparency.
For window transparency it is sufficient to call glfwSetWindowOpacicity(GLFWwindow*, float), where the opacity value should be in the range (0, 1].
NOTE: Since GLFW does not support using both transparency methods at the same time, we must still use VK_COMPOSITE_ALPHA_OPAQUE_BIT_KHR in the compositeAlpha field of the VkSwapchainCreateInfoKHR object.
Window transparency may not be supported on all systems, which is why GLFW provides us with a function glfwGetWindowOpacity(GLFWwindow*), to check if calling the first methods was successful.
The pointerup event is not working correctly with Win Windows Phone 8.1 and Internet Explorer 11. I mean, it is triggered automatically (just after pointerdown), and not when your finger goes out.
I've done an example here.
If you test it with desktop browsers or Android-Chrome or iOS-Chrome/Safai works correctly
Has anyone any workaround about it?
Are you getting a pointercancel event?
If you don't set the touch-action correctly, then pointercancel gets sent through immediately after pointerdown. I think this is because the browser thinks a manipulation such as scrolling has been initiated.
To avoid this we use:
html.is-pointer-events .touch-grip {
-ms-touch-action: none;
touch-action: none;
}
Note that we activate this rule only if we are using Microsoft pointer events, because otherwise the touch-action property interferes with other browsers (e.g. Chrome).
We add is-pointer-events to document.documentElement.className if navigator.msPointerEnabled is true (i.e. we add the class when we are using onpointerdown instead of ontouchstart). If you are using modernizr.js then it looks like it provides a pointerevents class you can use.
Unless you have a compelling need for them and you can afford to invest a lot into it, I would strongly recommend against supporting Microsoft pointer events. For us they have been an expensive headache for us to support, and the value returned has been minimal for us.
I am using FireBreath to create a cross browser plugin which makes use of some native libraries for the respective platform (some .NET based DLLs for Windows and Objective-C based dylibs/frameworks for Mac). Native libraries display UI screens. In order to improve usability, if the user has a multi/extended monitor setup, i would like the native UIs to appear on the same screen as the browser window is currently on.
If an identifier to the monitor with the browser window can be retrieved, that can be passed down to the native components which can be configured to display their UIs on that monitor. I have used FireBreath's getWindowPosition() method to get the rect coordinates of the plugin and used that info to identify the correct monitor in the Windows platform.
However, the coordinates returned in Mac seems to be always 0 (or 1) irrespective of monitor on which the browser window currently resides. I understand that we have to configure an event model and a drawing model in order for this to work in Mac. I have tried following event/drawing model combinations without much success.
1) Cocoa/CoreGraphics
2) Carbon/CoreGraphics
Any help in this regard is much appreciated. Also please do share if there are other approaches to achieve the same. What i want to achieve is to identify the monitor on which the current active browser window resides in Mac. I am unsure at this point, but it maybe possible to achieve this at Objective-C level (without any changes at FireBreath level). Also please note that i want to support Safari, Firefox and Chrome browsers.
You won't like this answer, but simply put you can't do that on Mac. The problem is that with CoreGraphics you are only given a CGContextRef to work with, and it doesn't know where it will be drawn. It was technically possible in older browsers to get an NSWindow by exploiting some internal implementation details, but many browsers that's no longer possible and it was never supported.
Other drawing models are the same; CoreAnimation you have a CALayer but it doesn't know which screen or monitor it is drawn to. I personally think it's a bit annoying as well, but I do not know of any way to find out which monitor your plugin is rendered to, particularly since most of them actually copy the buffer to something else and render in a different process.
I did manage to come up with a workaround and i am just replying here for the completeness of the thread. As #taxilian explained, it is not possible to retrieve plugin coordinates using the window reference. As an alternative approach, Javascript 'Window' object has 2 properties called 'screenX' and 'screenY' that return X and Y coordinates of the browser window relative to the screen. If the user has an extended monitor setup, these are the absolute coordinates with respect to the full extended screen. We can use these values to determine the monitor with the browser window (if the X coordinate is outside the bounds of the primary monitor's width, then the browser should essentially be on the extended monitor). We can retrieve DOM properties from Firebreath as explained in the following link:
http://www.firebreath.org/display/documentation/Invoking+methods+on+the+DOM