safari rotate bug

Safari CSS Visual Effects Guide

• Table of Contents
• Jump To…
• Download Sample Code

Using 2D and 3D Transforms

Use CSS transform properties to give webpages a rich visual appearance without needing image files. Elements can be positioned, rotated, and scaled in 2D and 3D space; perspective can also be applied, giving elements the appearance of depth.

For example, Figure 7-1 shows a simple HTML document, containing only div elements and text but rendered using CSS transform and gradient properties. It appears to be a graphics-intensive page, yet the actual content is less than 2 KB of text, and the elements animate smoothly in 3D under user control.

How does this work? HTML elements are, after all, inherently two-dimensional, or planar; they have height and width, but no thickness. By rotating planar elements into the third dimension and applying perspective, however, these elements can be combined to create apparently solid objects. For example, five div elements are combined in Figure 7-1 to form the sides and bottom of an open box; the ball inside the box is another div element with rounded borders—a radial gradient gives it the appearance of depth.

Safari uses a series of transformation matrices to determine the mapping of every pixel on the screen. You don’t need to understand matrices to use them, however. You can apply a transform either by using a matrix or by calling one of the transform functions, such as scale() or rotate() .

Transforming an element typically causes its image to be rendered in a different position on the screen, but the position and dimensions of the element on the page are not changed—the top , left , height , and width properties, for example, are not altered by transforms. It is the coordinate system in which the element is drawn that is changed. Consequently, changing transform properties does not affect the layout of a webpage. This means that transforming an element can cause it to visually overlap neighboring elements, even though their positions and dimensions on the page may not overlap.

By default, transforms are applied using the center point of an element as the origin; rotation spins an object about its center, for example, and scaling expands or contracts an element from the center point. You can change the origin by setting the -webkit-transform-origin property.

A transform can cause part of an element to be displayed in the element’s overflow area. If the value of the overflow property is scroll or auto , scroll bars appear as needed if a transform renders part of an object outside the display area.

Safari supports both 2D and 3D transforms. Both 2D and 3D transforms are W3C drafts.

See http://www.w3.org/TR/css3-2d-transforms/ and http://www.w3.org/TR/css3-3d-transforms/ for the specifications.

2D Transform Functions

To apply a 2D transform to an element, use the -webkit-transform property. The transform property can be set using predefined transform functions—translation, rotation, and scaling—or it can be set using a matrix.

2D Translation

2D translation shifts the contents of an element by a horizontal or vertical offset without changing the top or left properties. The element’s position in the page layout is not changed, but the content is shifted and a shifted coordinate system applies to all descendants of the translated element.

For example, if a div element is positioned at the point 10,10 using the CSS properties top and left , and the element is then translated 100 pixels to the right, the element’s content is drawn at 110,10 . If a child of that div is positioned absolutely at the point 0,100 , the child is also shifted to the right and is drawn at the point 110,110 ; the specified position of 0,100 is shifted right by 100, and the child is drawn at 100,100 relative to the parent’s upper-left corner, which is still at 10,10 . Figure 7-2 illustrates this example.

To apply a 2D translation, set the -webkit-transform property to translateX(offset) , translateY(offset) , or both. For example:

2D Rotation

2D rotation is a rotation in the xy plane. By default, 2D rotation spins an object around its center point. To rotate an element around a different point, see Changing the Origin . Rotation is specified in degrees clockwise from the element’s orientation after any inherited rotation; rotation affects the specified element and all of its descendants. The coordinate system of any descendants is likewise rotated.

The following snippet rotates a div element 45 degrees clockwise, as shown in Figure 7-3 . The div element has a beige background and contains a paragraph of text and an image; both the text and the image inherit the div element’s rotation. A second div is positioned under the rotated div to show the original div ’s position prior to rotation.

<div style="-webkit-transform: rotate(45deg);" >

Rotation can be specified in positive or negative degrees. For example, -webkit-transform: rotate(-45deg); specifies a 45 degree rotation counterclockwise. If rotation is animated, specifying a degree of rotation greater than the current degree causes clockwise rotation; specifying a degree of rotation less than the current degree causes counter-clockwise rotation.

When animating rotation, it can be useful to specify a rotation of more than 360 degrees. For example, Listing 7-1 uses JavaScript to set a rotation of 3600deg , causing a div element to spin clockwise ten times. The text spins once on page load, and a button lets the user spin it again.

Listing 7-1   Animating 2D rotation

Notice that the CSS property -webkit-transform is addressed in JavaScript as element.style.webkitTransform . Notice also that the spin() function increments the rotation angle by 3600 each time it is called; setting the angle to 3600deg repeatedly would have no effect.

2D scaling makes an element smaller or larger in one or two dimensions. Scaling affects the whole element, including any border thickness. By default, the element is scaled up or down relative to its center, which causes all four of the element’s corners to be redrawn at new locations. The element’s top , left , height , and width properties are unchanged, however, so the layout of the page is not affected. Consequently, scaling an element up can cause it to cover other elements on the page unless you design the layout to allow room for the expansion.

Scaling modifies the coordinate system of an element’s descendants, multiplying the x and y values by the specified scaling factor. For example, if a div element contains an image positioned absolutely at 10,10 , with a height and width of 100 pixels, scaling-up the div element by a factor of two results in a 200 x 200 image, positioned at 20,20 relative to the div ’s upper-left corner, which moves up and to the left. Figure 7-4 illustrates this behavior.

Apply a scale transformation by setting the -webkit-transform property to scale(x y) , where x and y are independent scale factors for width and height, or by setting the transform property to scale(size) , where size is the scaling factor in both dimensions. For example:

style=”webkit-transform: scale(1, 2)” renders an element the same width, but twice as tall.

style=”webkit-transform: scale(2, 0.5)” renders an element twice as wide and half as tall.

style=”webkit-transform: scale(1.5)” renders an element 1.5 times larger.

Setting Multiple Transforms

Different transforms, such as rotation and scaling, are applied by setting different values to a single property: -webkit-transform . Consequently, if you apply one transform to an element and then specify another transform, the first transform is no longer applied; the new value overwrites the old one, as with any CSS property.

There are two different ways to perform multiple transforms on an element—both scaling and rotating an element, for example:

Use inheritance to apply multiple transforms: create a scaled div element, for example, add your element as a child, then rotate the child element.

Set the -webkit-transform property of the element to a space-delimited list of transform functions, such as:

-webkit-transform: scale(2) rotate(45deg);

When a list of functions is provided, the final transformation value for the element is obtained by performing a matrix concatenation of each entry in the list. (Matrix concatenation can have some side effects, such as normalizing the rotation angle modulo 360.)

Both approaches—transform inheritance and transform function lists—are valid. The following two examples illustrate two ways to apply a set of transforms to an element. Listing 7-2 sets an element’s transform property to a list of transform functions. Listing 7-3 produces the same results by applying each transform to a nested element.

Listing 7-2   Setting multiple transforms using a list

Listing 7-3   Nesting 2D transforms

Changing the Origin

By default, the origin for transforms is the center of an element’s bounding box. Most HTML and CSS entities use the upper-left corner as the default origin, but for transforms, it is usually more convenient to use the center of an element as a reference point. Consequently, elements rotate around their center by default, and scale up or down from the center out.

To change the origin for transforms of a given element, set the -webkit-transform-origin property. The new origin is specified as a distance or percentage from the element’s upper-left corner. For example, the default center origin can be expressed as -webkit-transform-origin: 50% 50%; . Changing the origin to 0% 0% or 0px 0px causes transformation to occur around the upper-left corner of the element.

The code in Listing 7-4 rotates the second box in Figure 7-5 around the top-right corner.

Listing 7-4   Rotating an element around the top-right corner

3D Transforms

The standard HTML coordinate system has two axes—the x-axis increases horizontally to the right, and the y-axis increases vertically downwards. With 3D transforms, a z-axis is added, with positive values rising out of the window toward the user and negative values falling away from the user, as Figure 7-6 illustrates.

3D transforms move an element out of the usual xy plane, where z=0—the plane of the display. A transformed element is still two dimensional, but it no longer lies in the usual plane. A transformed object may be translated along the z-axis, rotated around the x- or y-axis, or transformed using some combination of translation and rotation.

All HTML elements have a z-index. The z-index controls the rendering order when elements overlap. An element’s z-index has nothing to do with its z-axis coordinate. Transformed objects follow the standard HTML rendering rules—objects with higher z-index values are drawn on top of other objects with lower z-index values—but for elements sharing the same z-index, the areas with higher z-axis coordinate values are drawn on top.

Adding 3D Perspective

To render elements with the appearance of depth, you must specify a perspective. If you apply 3D transforms without setting the perspective, elements appear flattened. For example, if you rotate an element around its y-axis without setting the perspective, the element just appears narrower. If you rotate an element 90 degrees from the default xy plane, it is seen edge-on—the element either disappears entirely or is displayed as a line.

Adding perspective distorts the appearance of objects realistically, making nearby things appear larger and distant things look smaller. The closer the object, the greater the distortion. In order for Safari to create the illusion of depth, it’s necessary to specify a point of view, or perspective. Once Safari knows where the user’s eye is relative to an element, it knows how much distortion to apply and where.

Use the -webkit-perspective property to set the perspective for all the descendants of an element. For example:

The perspective is specified in distance from the screen. You may specify the distance in pixels, centimeters, inches, or any CSS distance unit. If no unit type is supplied, px is assumed.

Listing 7-5 sets the -webkit-perspective property using a slider.

Listing 7-5   Adding a perspective slider

Figure 7-7 shows two perspective settings from the previous example in which a child element is rotated 45 degrees around the x-axis. The elements are shown at the same rotation and position in both cases, but with different perspective settings.

You can envision perspective view as a pyramid, with the point of the pyramid centered at the user’s eye, and the base of the pyramid extending into the infinite distance. By setting the -webkit-perspective property, you specify the viewpoint’s z-coordinate—how far the point of the pyramid lies above the screen. By default, the x- and y-coordinates of the viewpoint are the center of the element to which the -webkit-perspective property belongs.

Shift the viewpoint horizontally or vertically by setting the -webkit-perspective-origin property. The default setting is -webkit-perspective-origin: 50% 50% . To set the viewpoint above the top-left corner of an element, for example, set the element’s style to -webkit-perspective-origin: 0px 0px .

The perspective origin can affect the visibility of elements. For example, if an element is rotated 90 degrees out of the default plane, it is viewed edge-on: if the perspective origin is directly in front of the element, the element is invisible; but if the origin is off-center from the element, one side of the element can be seen. For example, Listing 7-6 creates three div elements, all rotated 90 degrees. The elements positioned on the left and right of the window are visible. When the window is sized appropriately, however, the element in the center of the window is edge-on to the viewer and cannot be seen, as Figure 7-8 illustrates.

Listing 7-6   Effects of perspective origin

Creating a 3D Space

By default, the descendants of an element are flattened into the plane of their parent. When you apply a 3D transform to an element, that element’s plane is no longer the default xy plane—the plane of the display. All descendants of the element share that element’s new plane. In order to further transform the children of an element relative to that element’s plane, you must set the -webkit-transform-style property to preserve-3d , creating a 3D space. For example:

<div id="space3d" style="-webkit-transform-style: preserve-3d;">

Setting the transform style to preserve-3d in an element makes that element into a 3D container; all the element’s immediate children can be manipulated independently in 3D, relative to the parent. Because HTML elements are flat, a transformed child also occupies a plane in 3D space. Each child can occupy a separate plane, or multiple children can share the same plane. By default, any descendants of these transformed children are flattened into their parental plane; setting the transform style to preserve-3d affects only an element’s immediate children.

3D containers can be nested. Enabling 3D transforms in one of a container element’s descendants creates a nested 3D layer; children of that descendant can be transformed in 3D, relative to their container’s plane. You need to enable 3D in a particular element only if the element’s children are to be transformed in 3D relative to that element’s plane.

Any transform applied to a 3D container is inherited by all of its descendants. By applying a rotation to the highest level 3D container, for example, you are able to rotate the view of all of the container’s contents at once.

Listing 7-7 gives an example of a nested pair of 3D containers, illustrated in Figure 7-9 . The topmost container has a child div element rotated 45 degrees on its x-axis, so it appears to be tilted away from the viewer. This child div is also a 3D container, containing a paragraph of text rotated 35 degrees on its right edge away from the container, causing the text to appear to lift off the page.

Listing 7-7   Nested 3D rotations

Generally speaking, you need to create only a single 3D container—all 3D transforms can be applied relative to the default xy plane, and global transforms can be applied to the top-level container and inherited by all its descendants. Sometimes it may be convenient to manipulate a subgroup of transformed elements as a unit, however; in such a case, it makes sense to create a nested container.

To disable 3D for an element’s children dynamically, set the -webkit-transform-style property to flat . Applying a 3D transform when the transform style is set to flat does not move the element out of its parent’s plane.

3D Transform Functions

Like 2D transforms, 3D transforms are set using the -webkit-transform property. You can apply a transform to an element by specifying a transform function, a list of transform functions, or by passing in a 3D matrix. There are several functions that perform 3D transforms:

translateZ(distance) —Moves an element closer or farther away.

translate3d(x, y, z) —Moves an element in three dimensions.

rotateX(degrees) —Rotates an element around the x-axis, moving the top and bottom closer or farther away.

rotateY(degrees) —Rotates an element around the y-axis, moving the left and right sides closer or farther away.

perspective(distance) —Sets the 3D perspective for a single element.

3D Translation

3D translation moves an element closer to or farther from the viewer by changing its position on the z-axis. Use the translateZ() function to shift an element on the z-axis, or the translate3d(x, y, z) function to shift an element on two or three axes. For example:

The 3D translation functions work like their 2D counterparts, except that the z offset cannot be specified as a percentage. Z-axis units may be positive (towards the viewer) or negative (away from the viewer). Figure 7-10 shows two identical div elements with same height, width, and x and y positions, one translated on the z-axis by 100 px and the other translated by -100 px.

All descendants of an element inherit its z-axis translation. Note that the text in the previous illustration is translated along with its parent.

3D Rotation

You can rotate an element in 3D either around the y-axis, so that the right and left edges get nearer and farther away, or around the x-axis, so that the top and bottom edges get nearer and farther away. For example:

Rotation is around an imaginary x- or y-axis that passes through the element’s origin. By default, the origin is at the center of an object. Positive x units rotate the top edge away. Positive y units rotate the right edge away. This is illustrated in Figure 7-11 .

All descendants of an element inherit its 3D rotation. Note that the text in the previous illustration is rotated along with its parent.

Setting Perspective for a Single Element

To create a 3D space with a shared perspective, you need to create a 3D container that has the -webkit-perspective property set; but if you just want to render a single element with the appearance of depth, you can set the -webkit-transform property to a list of transform functions that includes the perspective(distance) function as the first transform. For example:

The foregoing snippet performs two 3D transforms on an element—rotation about the x-axis and perspective distortion, as if the user were viewing the object from 10 cm in front of the screen.

In almost all cases, it is better to create a 3D container and set the -webkit-perspective property for the container element than it is to apply the perspective() transform to an element directly. See Figure 7-7 for details.

Back Face Visibility

If an element is rotated 90 degrees or more around the x- or y-axis, the back face of the element faces the user. The back face of an element is always transparent, so the user sees a reversed image of the front face through the transparent back face, like a sign painted on a glass door and seen from behind. To prevent the mirror image of the front face from being displayed, set the -webkit-backface-visibility property to hidden . For example:

When -webkit-backface-visibility is set to hidden , an element is not displayed where its back face would be visible. One reason to do this is to create the illusion that an element has two faces, each with its own content. For example, to create the illusion of a card with different contents on the front and back face, two elements are positioned back to back in the same location. The two elements are then rotated together, progressively hiding the front element and revealing the back element. If the back face of the top element were visible, it would obscure the element beneath it instead of revealing the element beneath it as it rotates. Listing 7-8 creates the illusion of a card with content on both sides, as Figure 7-12 shows.

Listing 7-8   Hiding the back side of a card

Using Transformation Matrices

A transformation matrix is a small array of numbers (nine numbers for a 2D matrix, sixteen for a 3D matrix) used to transform another array, such as a bitmap, using linear algebra. Safari provides convenience functions for the most common matrix operations—translation, rotation, and scaling—but you can apply other transforms, such as reflection or shearing, by setting the matrix yourself.

2D Matrix Operations

For a 2D transform, set the -webkit-transform property to matrix(a,b,c,d,e,f) , where the matrix position of the parameters is in column order, as Figure 7-13 shows. The first column in the matrix is the x vector; the second column is the y vector.

To make full use of transformation matrices, you need an understanding of linear algebra. But even without an understanding of linear algebra, you can often look up the matrix values for a particular effect. For example, here are the settings for reflection around the x- and y-axes:

Reflection around the y-axis— -webkit-transform: matrix(-1,0,0,1,0,0);

Reflection around the x-axis— -webkit-transform: matrix(1,0,0,-1,0,0);

Here are the matrix parameter settings for some common effects:

translate(x, y) = matrix(1, 0, 0, 1, x, y)

scale(x, y) = matrix(x, 0, 0, y, 0, 0)

rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)

skewx(a) = matrix(1, 0, tan(a), 1, 0, 0)

skewy(a) = matrix(1, tan(a), 0, 1, 0, 0)

An example of using matrix settings to mirror, stretch, and skew elements is given in Listing 7-9 and is illustrated in Figure 7-14 .

Listing 7-9   Matrix example

3D Matrix Operations

For a 3D transform, set the -webkit-transform property to matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p) , where the parameters are a homogeneous 4 x 4 matrix in column-major order. This means that the a , b , c , and d parameters, for example, line up as the first column in a 4 x 4 matrix, as Figure 7-15 shows. The first column is the x vector, the second column is the y vector, and the third column is the z vector.

Following are some common parameter settings for 3D transforms:

Identity matrix— matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)

Translate matrix— matrix3d(1,0,0,tX,0,1,0,tY,0,0,1,tZ,0,0,0,1)

Scale matrix— matrix3d(sX,0,0,0,0,sY,0,0,0,0,sZ,0,0,0,0,1)

RotateX(a) matrix— matrix3d(1,0,0,0,0,cos(a),sin(a),0,0,sin(-a),cos(a),0,0,0,0,1)

RotateY(a) matrix— matrix3d(cos(a),0,sin(-a),0,0,1,0,0,sin(a),0,cos(a),0,0,0,0,1)

Working with Transforms in JavaScript

There are a few things to be aware of when using JavaScript to control transforms.

The CSS names for transform properties are different than the JavaScript names. When using JavaScript to set a property, delete the hyphens from the property name and capitalize the first letter of the following word. The following snippet shows how to set properties for an element with the ID “myElement” in CSS and JavaScript:

You cannot set a transform property to two consecutive states in a single JavaScript execution cycle . As with all CSS properties, transforms are not applied until the current JavaScript context finishes execution. If you need to set a property to consecutive states, break the code into separate functions and set a timeout; this allows the context to complete. For example, suppose you want to animate a rotation from 0-360 degrees repeatedly. You might do this by disabling the animation, setting the rotation to 0deg , enabling the animation, and setting the rotation to 360deg . Unless you end the JavaScript context between the two settings, the code will not work. The following snippet shows how to accomplish the task:

If you dynamically trigger transformation of an already-transformed element, the old transforms are lost. You must set the style.webkitTransform property to a list of all the transforms necessary to bring the element from its native position and orientation to the desired state. Example: Animated Rotating Box Under JavaScript Control gives an example of the necessary steps in the buttons that open and close the lid of the box.

Transforming an element in an onclick handler may move the element behind other elements so that touch or mouse events are intercepted by those other elements. One solution is to include touch and mouse handlers on any elements that the desired target element may be transformed behind.

If you set the -webkit-transform property using a list of transform functions as parameters, the functions may be combined into a matrix before being applied. Combining transform functions into a matrix normalizes rotation settings modulo 360 so that a setting of 720deg , for example, is normalized to 0deg . You can avoid this behavior by using the same set of transform functions every time you transform the element.

You can use the webkitTransform property to get an element’s transform . Use the window.getComputedStyle() method to obtain the property, as shown in the following snippet:

The webkitTransform property is a string representation of a list of transform operations. Usually this list contains a single matrix transform operation. For 3D transforms, the value is "matrix3d(...)" with the 16 values of the 4 x 4 homogeneous matrix between the parentheses. For 2D transforms, the value is a "matrix(...)" string containing the six vector values.

Example: Animated Rotating Box Under JavaScript Control

The following listing illustrates several of the points covered in Working with Transforms in JavaScript . The result is illustrated in Figure 7-16 .

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

safari rotate bug #31

kukac7 commented Dec 3, 2021

simeydotme commented Dec 4, 2021

Sorry, something went wrong.

kukac7 commented Dec 4, 2021

• ❤️ 1 reaction

No branches or pull requests

• Home New Posts Forum List Trending New Threads New Media Spy
• WikiPost Latest summaries Watched WikiPosts
• Support FAQ and Rules Contact Us

Is this a mobile Safari bug? White space appears at bottom after rotating iPhone

• Thread starter smirk
• Start date Nov 5, 2019
• Sort by reaction score
• Web Design and Development

macrumors 6502a

• Nov 5, 2019

• Nov 6, 2019

I've had issues with IOS Safari with stuff like this, so it's probably a bug. You could try to account for the 45 - 50px gap, roughly the height of the bottom bar of safari, on the bottom by adding a scroll event listener once it gets to that threshold and remove/add the height of that gap.  

olup said: I've had issues with IOS Safari with stuff like this, so it's probably a bug. You could try to account for the 45 - 50px gap, roughly the height of the bottom bar of safari, on the bottom by adding a scroll event listener once it gets to that threshold and remove/add the height of that gap. Click to expand...

• Nov 7, 2019

you mean the actual height of the bottom bar? I've always taken screenshots of Safari and measured the height of the bottom bar on window load. Have a look at the Intersection Observer API. There's something called root margin, which is the margin around the root element that you're checking against.  

lololissimo

Macrumors newbie.

• Feb 3, 2020

I’ve stumbled upon exactly the same problem. What I don’t understand is how come this is the only report I could find. Any height:100% div in a height:100% body would do that! Did you manage to overcome it, @smirk ?  

• Feb 6, 2020

lololissimo said: I’ve stumbled upon exactly the same problem. What I don’t understand is how come this is the only report I could find. Any height:100% div in a height:100% body would do that! Did you manage to overcome it, @smirk ? Click to expand...

ethanmarcos

• Feb 7, 2020

ethanmarcos said: I would recommend you use an alternate browser. I am not a fan of safari Click to expand...

olup said: Take a look at my post above yours, where I've linked to the intersection observer on MDN. I don't think there's a plain CSS solution to this. What would need to happen is that you set the observer to an onscroll event, where the 50px from the navigation bar is subtracted once the page is loaded and re-added once the scrolling starts. I hope this will help. Click to expand...

smirk said: Hi, I stopped working on this issue for awhile but now I'm back looking at it. It is affecting all of our mobile apps. I also don't understand why reports of this aren't more widespread. I'll keep you updated if I discover a work around. That's not particularly helpful, although I thought the same thing. But we can't tell our customers to install and use a different web browser just for our app. [automerge]1581096778[/automerge] Thanks for your reply, but I'm not following you. What does scrolling have to do with it? What's happening is you bring up a page in portrait, then rotate the phone to landscape, then rotate back to portrait -- with or without scrolling along the way -- and then the layout gets all messed up. There is a section at the bottom of the screen that seems unusable and unreachable. Sometimes the height of this section seems to equal the height of the hidden browser control elements, but sometimes the height seems much larger than that. I don't have all my facts straight yet, but it's possible that iPhone X-class devices have taller unusable sections than iPhone 8-class ones. So maybe you're onto something, but I'm not getting how scrolling fits into this. Click to expand...

So I did some experimenting, and setting body to height: 100vh; seems to be working so far. All its children are using a height of 100%, and so far so good. I'll keep playing with it.  

• Feb 8, 2020
• Feb 10, 2020

Hey, I take it back -- it's not working with body set to height:100vh; . Doing that seemed to help when I used browser tools to change those properties when my phone had our app up, but I distilled it down to a very simple HTML page that exhibits the issue, and using 100vh doesn't affect it. Viewing this page in iOS 13 shows the white space at the bottom after rotating to landscape and back. HTML: <!DOCTYPE html> <html> <head> <title>Test Page!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div style="position:absolute; padding:0px; margin:0px; border-width:0px; height:100%; width:100%; background-color:blue;">Rotate me</div> </body> </html>  

• Feb 20, 2020

I am still working on finding an elegant solution. This approach re-instates the correct height on iphone. JavaScript: html{height:100%;} body{margin: 0;min-height:100%;height:100%;overflow:hidden;} window.addEventListener('resize', function() { if ( window.matchMedia("(orientation: portrait)").matches ) { document.getElementsByTagName("html")[0].style.height = "100vh"; setTimeout(function(){ document.getElementsByTagName("html")[0].style.height = "100%"; }, 500); } });  

• Mar 10, 2020
• Mar 16, 2020

Hello! I joined MacRumors just so I could participate in this thread. I'm running the example through an Xcode simulator but cannot reproduce the defect. Is that just me or has something changed there? However, I am having the exact same issue in my app. I noticed that if I dismiss the toolbar after rotating back to portrait orientation, everything snaps to fill all the available space and the defect does not happen again with subsequent transitions between landscape and portrait. Can anyone think of why that may be?  

• Mar 17, 2020

Hello @PLawless , I also joined because of this thread I think that nothing changed, I recently posted, so I don't think that Safari fixed the issue if you think on that. Please try on a real device, not a simulator, because I also didn't reproduce on a simulator. Somehow look like CSS of Safari is broken, that's my thought and doesn't recalculate nice height, also there is some collision if you have buttons in that area. Did you try workaround that's above?  

Hey @mala3103 , I did try the workaround but the timeout interval caused the screen to shift, which won't be acceptable in my situation. Perhaps a CSS animation might work? I'll give that a try. Strange that the provided example won't present on the simulator. If this is a bug with Safari, should we be reaching out to Apple to fix it?  

FYI I cannot reproduce the defect on a real device either (in my case: iPhone XR, iOS13.3)  

• Apr 26, 2020

I came across this tweet today that fixes the min-height: 100vh bug on mobile safari. Not sure, if it addresses the address bar issue though. CSS: body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; }  

hunainhashim

• May 10, 2022

Hi everyone, I am having the same issue when I apply the css property "position fixed" on body after hiding the address bar by scrolling the page. I tried all the solutions mentioned above but none of them are working for me. If you guys found the solution please share it here. Thanks  

Attachments

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Hovering not working properly in Safari

Hey guys! I've been experiencing the following problem: sometimes when I create a new tab in Safari the hovering doesn't work in it, meaning certain elements of web interface that are supposed to somehow change when you hover over them with a cursor just don't do that. For example on YouTube menu items on the left should get a grey background and whenever you hover over a video thumbnail there should be a clock icon to add it to Watch Later etc. This bug only shows itself in certain tabs only though, like for example right now I have only three "healthy" tabs and three bugged ones. This bug is both on my iMac and Macbook Pro. Thanks in advance for help!

P.S. This was unnecessarily difficult to explain.

iMac Line (2012 and Later)

Posted on Sep 11, 2019 1:27 PM

Similar questions

• Hover does not work on Safari Since last big Safari update on my MacBook I experience the following problem: Safari does not recognise that I hover over links, buttons or other active elements. Previously cursor turned into the hand and the element changed in color (or did something similar depending on the website). Now cursor does nothing. It is especially inconvenient while working in Google Tables as it becomes completely impossible to change the size of the columns or work with websites where the information was provided by the cursor hover on the graphs/dropdown lists/etc. Restart of the browser helps only only for the firs opened tab. Does anyone have the same issue? 2727 1
• Cursor hovering function gone in safari Earlier, when using my macbook pro and the standard trackpad to move the cursor around, the cursor has interacted with the content on the web pages without needing an actual click (say moving the cursor over a facebook notification and the notification goes blue and you get some options to click on to the left, or when moving the cursor over a playing youtube video the scrubbing bar (?) at the bottom of the viewport shows up, or when hoovering/moving the cursor over the scrubbing bar it previews thumbnails from the video). That function has suddenly gone, and it relates to all web pages in Safari (other browsers work as normal). In Youtube specifically, when playing a video in standard view or cinema view, the cursor almost always disappears completely no matter where I point it on the screen, and requirers a lot movement to come back to the screen. 3259 3
• Bug displaying Safari tabs on Touch Bar Hello, community. I would like to raise the topic about the bug of displaying Safari tabs on Touch Bar. I've seen similar posts on other forums, but it's been a long time and it seems that Apple doesn't do anything about it. Tell me, is it possible to solve this overlapping tabs on each other or does it depend only on Apple? However, it is very unpleasant to see this horror every time, since this problem has been since the days of mac OS Mojave 871 1

Loading page content

Page content loaded

There are no replies.

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 193 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

I'm always curious about these Safari Tech Preview posts. Are they just a quick way to add another headline? I suspect so, as I don't see many people trusting these builds as their daily driver. I've tried that in the past, but it never stuck.

Popular Stories

Apple Announces 'Let Loose' Event on May 7 Amid Rumors of New iPads

Apple Releases Open Source AI Models That Run On-Device

Apple Cuts Vision Pro Shipments as Demand Falls 'Sharply Beyond Expectations'

Apple Finally Plans to Release a Calculator App for iPad Later This Year

iOS 18 Rumored to Add These 10 New Features to Your iPhone

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

10 hours ago by Joe Rossignol

14 hours ago by MacRumors Staff

1 day ago by Joe Rossignol

3 days ago by Tim Hardwick

Fix SVG CSS animation issue in Safari

Safari 16 has trouble with CSS animations on SVG child elements, but you can resolve them by using a combined transform property.

Setup: You have an SVG that needs separate animations for its path and rect elements. Applying a single transform to the elements works, but combining multiple transforms results in nondeterministic animation bugs:

The fix: You can fix this by combining your transformations into multiple functions on a single transform property:

Try it out:

See the Pen Safari CSS animation SVG bug by Sean McPherson ( @SeanMcP ) on CodePen .

Takeaway: Individual properties for CSS transforms are nice, but they can cause issues with SVG animations in Safari. The safer option seems to be sticking with a single transform property for now.

• https://stackoverflow.com/a/72022385/8486161
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Turn Your Curiosity Into Discovery

Latest facts.

13 Facts About Brain Tumor Awareness Month US May

13 Facts About Community Garden Week Apr 1st To Apr 7th

40 facts about elektrostal.

Written by Lanette Mayes

Modified & Updated: 02 Mar 2024

Reviewed by Jessica Corbett

Elektrostal is a vibrant city located in the Moscow Oblast region of Russia. With a rich history, stunning architecture, and a thriving community, Elektrostal is a city that has much to offer. Whether you are a history buff, nature enthusiast, or simply curious about different cultures, Elektrostal is sure to captivate you.

This article will provide you with 40 fascinating facts about Elektrostal, giving you a better understanding of why this city is worth exploring. From its origins as an industrial hub to its modern-day charm, we will delve into the various aspects that make Elektrostal a unique and must-visit destination.

So, join us as we uncover the hidden treasures of Elektrostal and discover what makes this city a true gem in the heart of Russia.

Key Takeaways:

• Elektrostal, known as the “Motor City of Russia,” is a vibrant and growing city with a rich industrial history, offering diverse cultural experiences and a strong commitment to environmental sustainability.
• With its convenient location near Moscow, Elektrostal provides a picturesque landscape, vibrant nightlife, and a range of recreational activities, making it an ideal destination for residents and visitors alike.

Known as the “Motor City of Russia.”

Elektrostal, a city located in the Moscow Oblast region of Russia, earned the nickname “Motor City” due to its significant involvement in the automotive industry.

Home to the Elektrostal Metallurgical Plant.

Elektrostal is renowned for its metallurgical plant, which has been producing high-quality steel and alloys since its establishment in 1916.

Boasts a rich industrial heritage.

Elektrostal has a long history of industrial development, contributing to the growth and progress of the region.

Founded in 1916.

The city of Elektrostal was founded in 1916 as a result of the construction of the Elektrostal Metallurgical Plant.

Located approximately 50 kilometers east of Moscow.

Elektrostal is situated in close proximity to the Russian capital, making it easily accessible for both residents and visitors.

Known for its vibrant cultural scene.

Elektrostal is home to several cultural institutions, including museums, theaters, and art galleries that showcase the city’s rich artistic heritage.

A popular destination for nature lovers.

Surrounded by picturesque landscapes and forests, Elektrostal offers ample opportunities for outdoor activities such as hiking, camping, and birdwatching.

Hosts the annual Elektrostal City Day celebrations.

Every year, Elektrostal organizes festive events and activities to celebrate its founding, bringing together residents and visitors in a spirit of unity and joy.

Has a population of approximately 160,000 people.

Elektrostal is home to a diverse and vibrant community of around 160,000 residents, contributing to its dynamic atmosphere.

Boasts excellent education facilities.

The city is known for its well-established educational institutions, providing quality education to students of all ages.

A center for scientific research and innovation.

Elektrostal serves as an important hub for scientific research, particularly in the fields of metallurgy, materials science, and engineering.

Surrounded by picturesque lakes.

The city is blessed with numerous beautiful lakes, offering scenic views and recreational opportunities for locals and visitors alike.

Well-connected transportation system.

Elektrostal benefits from an efficient transportation network, including highways, railways, and public transportation options, ensuring convenient travel within and beyond the city.

Famous for its traditional Russian cuisine.

Food enthusiasts can indulge in authentic Russian dishes at numerous restaurants and cafes scattered throughout Elektrostal.

Home to notable architectural landmarks.

Elektrostal boasts impressive architecture, including the Church of the Transfiguration of the Lord and the Elektrostal Palace of Culture.

Offers a wide range of recreational facilities.

Residents and visitors can enjoy various recreational activities, such as sports complexes, swimming pools, and fitness centers, enhancing the overall quality of life.

Provides a high standard of healthcare.

Elektrostal is equipped with modern medical facilities, ensuring residents have access to quality healthcare services.

Home to the Elektrostal History Museum.

The Elektrostal History Museum showcases the city’s fascinating past through exhibitions and displays.

A hub for sports enthusiasts.

Elektrostal is passionate about sports, with numerous stadiums, arenas, and sports clubs offering opportunities for athletes and spectators.

Celebrates diverse cultural festivals.

Throughout the year, Elektrostal hosts a variety of cultural festivals, celebrating different ethnicities, traditions, and art forms.

Electric power played a significant role in its early development.

Elektrostal owes its name and initial growth to the establishment of electric power stations and the utilization of electricity in the industrial sector.

Boasts a thriving economy.

The city’s strong industrial base, coupled with its strategic location near Moscow, has contributed to Elektrostal’s prosperous economic status.

Houses the Elektrostal Drama Theater.

The Elektrostal Drama Theater is a cultural centerpiece, attracting theater enthusiasts from far and wide.

Popular destination for winter sports.

Elektrostal’s proximity to ski resorts and winter sport facilities makes it a favorite destination for skiing, snowboarding, and other winter activities.

Promotes environmental sustainability.

Elektrostal prioritizes environmental protection and sustainability, implementing initiatives to reduce pollution and preserve natural resources.

Home to renowned educational institutions.

Elektrostal is known for its prestigious schools and universities, offering a wide range of academic programs to students.

Committed to cultural preservation.

The city values its cultural heritage and takes active steps to preserve and promote traditional customs, crafts, and arts.

Hosts an annual International Film Festival.

The Elektrostal International Film Festival attracts filmmakers and cinema enthusiasts from around the world, showcasing a diverse range of films.

Encourages entrepreneurship and innovation.

Elektrostal supports aspiring entrepreneurs and fosters a culture of innovation, providing opportunities for startups and business development.

Offers a range of housing options.

Elektrostal provides diverse housing options, including apartments, houses, and residential complexes, catering to different lifestyles and budgets.

Home to notable sports teams.

Elektrostal is proud of its sports legacy, with several successful sports teams competing at regional and national levels.

Boasts a vibrant nightlife scene.

Residents and visitors can enjoy a lively nightlife in Elektrostal, with numerous bars, clubs, and entertainment venues.

Promotes cultural exchange and international relations.

Elektrostal actively engages in international partnerships, cultural exchanges, and diplomatic collaborations to foster global connections.

Surrounded by beautiful nature reserves.

Nearby nature reserves, such as the Barybino Forest and Luchinskoye Lake, offer opportunities for nature enthusiasts to explore and appreciate the region’s biodiversity.

Commemorates historical events.

The city pays tribute to significant historical events through memorials, monuments, and exhibitions, ensuring the preservation of collective memory.

Promotes sports and youth development.

Elektrostal invests in sports infrastructure and programs to encourage youth participation, health, and physical fitness.

Hosts annual cultural and artistic festivals.

Throughout the year, Elektrostal celebrates its cultural diversity through festivals dedicated to music, dance, art, and theater.

Provides a picturesque landscape for photography enthusiasts.

The city’s scenic beauty, architectural landmarks, and natural surroundings make it a paradise for photographers.

Connects to Moscow via a direct train line.

The convenient train connection between Elektrostal and Moscow makes commuting between the two cities effortless.

A city with a bright future.

Elektrostal continues to grow and develop, aiming to become a model city in terms of infrastructure, sustainability, and quality of life for its residents.

In conclusion, Elektrostal is a fascinating city with a rich history and a vibrant present. From its origins as a center of steel production to its modern-day status as a hub for education and industry, Elektrostal has plenty to offer both residents and visitors. With its beautiful parks, cultural attractions, and proximity to Moscow, there is no shortage of things to see and do in this dynamic city. Whether you’re interested in exploring its historical landmarks, enjoying outdoor activities, or immersing yourself in the local culture, Elektrostal has something for everyone. So, next time you find yourself in the Moscow region, don’t miss the opportunity to discover the hidden gems of Elektrostal.

Q: What is the population of Elektrostal?

A: As of the latest data, the population of Elektrostal is approximately XXXX.

Q: How far is Elektrostal from Moscow?

A: Elektrostal is located approximately XX kilometers away from Moscow.

Q: Are there any famous landmarks in Elektrostal?

A: Yes, Elektrostal is home to several notable landmarks, including XXXX and XXXX.

Q: What industries are prominent in Elektrostal?

A: Elektrostal is known for its steel production industry and is also a center for engineering and manufacturing.

Q: Are there any universities or educational institutions in Elektrostal?

A: Yes, Elektrostal is home to XXXX University and several other educational institutions.

Q: What are some popular outdoor activities in Elektrostal?

A: Elektrostal offers several outdoor activities, such as hiking, cycling, and picnicking in its beautiful parks.

Q: Is Elektrostal well-connected in terms of transportation?

A: Yes, Elektrostal has good transportation links, including trains and buses, making it easily accessible from nearby cities.

Q: Are there any annual events or festivals in Elektrostal?

A: Yes, Elektrostal hosts various events and festivals throughout the year, including XXXX and XXXX.

Was this page helpful?

Our commitment to delivering trustworthy and engaging content is at the heart of what we do. Each fact on our site is contributed by real users like you, bringing a wealth of diverse insights and information. To ensure the highest standards of accuracy and reliability, our dedicated editors meticulously review each submission. This process guarantees that the facts we share are not only fascinating but also credible. Trust in our commitment to quality and authenticity as you explore and learn with us.

Share this Fact: