safari css calc not working

Make Me Engineer

CSS calc not working in Safari and fallback

The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don’t support CSS calc would only read.

The left and right panels, get a width of 48% if the browser cannot read the calc values.

And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.

Leave a Comment Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Everything Software Development

Why is my CSS Calc not working?

Today I was trying to track down a really weird issue whilst following an example online. Trying to debug the issue, and finally comparing file by file each line, the only difference I could find was that I had:

Whilst the demo I was following had:

I changed the line in my CSS file and everything started working again! Taking a look at the Mozilla documentation , the reason is clear in the very first note. You must surround the operator with whitespace, otherwise, the Calc CSS function will not execute correctly!

Author Paul

Other posts by this author

Investigating GraphQL Fragment Caching Issues

Apple receipts: latest_receipt_info order, my new blog, handling the orientation of screens in web pages.

As part of responsive design a web page should react to the device it is being displayed on and make the most of the available screen real estate accordingly. With the advent of HTML5 & CSS3 the media tag for stylesheet links has been extended to cope with minimum screen heights and widths. It has also been extended to include “orientation”, the following header block correctly loads/references the relevant stylesheet for the orientation of the . . .

Producing HTML with less Typing

A helpful little tool to reduce the amount of typing needed to produce HTML, with a more detailed introduction on Smashing Magazine.  Also include a Resharper 5.0 plug-in.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• Skip to main content
• Select language
• Skip to search

Formal syntax

Nested calc() with css variables.

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The calc() CSS function can be used anywhere a <length> , CSS data type denotes a frequency dimension, like the pitch of a speaking voice."> <frequency> , CSS data type represents angle values. It is used, for example, in rotate and skew transforms."> <angle> , CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a​ ​​​​​​<number> immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number."> <time> , CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension."> <number> , or CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digits, 0 to 9, optionally preceded by one single + or - sign."> <integer> is required. With calc() , you can perform calculations to determine CSS property values.

It is possible to nest calc() function, the internal ones being considered as simple parenthesis () .

Expressions

The expression can be any simple expression combining the following operators, using standard operator precedence rules:

The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

where <calc-sum> = <calc-product> [ [ ' + ' | '-' ] <calc-product> ] *

where <calc-product> = <calc-value> [ ' * ' <calc-value> | '/' CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension."><number> ] *

where <calc-value> = CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension."><number> | <dimension> | CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number."><percentage> | ( <calc-sum> )

Positioning an object on screen with a margin

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

Consider the following code:

After all variables are expanded, widthC 's value will be calc( calc( 100px / 2) / 2) , then when it's assigned to .foo's width property, all inner calc() s (no matter how deeply nested) will be flattened to just parentheses, so the  width  property's value will be eventually calc( ( 100px / 2) / 2) , i.e. 25px . In short: a  calc() inside of a calc() is identical to just parentheses.

Specifications

Browser compatibility.

[1] Support for the non-standard prefixed version -moz-calc() was removed in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50).

[2] In WebKit 6.0 the implementation was incorrect.

[3] See Chromium bug 600113 .

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog

Document Tags and Contributors

• CSS Function
• CSS Reference

Why Your calc() Function in CSS Might Be Broken

A CSS bug is a nightmare for every developer. Not only is CSS hard to debug, but it can also go wrong in so many ways.

You've fiddled with the calc() function about a dozen times now but no matter what you try, you can't seem to figure out how to make it work.

Only if writing CSS came to you as naturally as writing JavaScript. You would immediately spot the bug and move on to other tasks.

In this article, you'll learn the common mistake developers make when writing mathematical expressions in CSS.

You'll also learn how to debug calc() and see the computed value change in real-time. You'll finally fix the issue and make sure you'll never have to face it again.

Whitespace and mathematical expressions in CSS

There's a subtle, but important , rule in CSS when it comes to writing mathematical expressions:

The + and - operands must be surrounded by whitespace.

This calc() expression won't work:

However, adding whitespace around the + operand fixes the issue:

As a backend developer, I really tripped over this one. In Node.js, whitespace around operands is irrelevant.

MDN has to say the following about how the calc() expression is parsed :

calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

Using our example, the expression calc(10px+100px) is parsed as a length ( 10px ) followed by another (positive) length ( +100px ).

The plus sign (+) is mistaken for a positive integer sign instead of an addition operator which renders the entire expression invalid.

Adding whitespace around the plus sign: calc(10px + 100px) , fixes the issue. The plus sign is now correctly parsed as an addition operator .

The / and * operands don't require whitespace, but adding it is recommend for consistency and to avoid confusion.

How to debug calc() ?

Debugging calc() is a bit tricky.

With calc() , the computed value can be different depending on which element it is used. While some expressions such as calc(10px + 10px) always evaluate to the same result, other expressions such as calc(10px + 50%) are dynamic and will change depending on context.

The browser evaluates the expression when it's used with an element. In other words, the final value only exists until it's been used within a property.

An, albeit hacky, way to debug calc() is using Developer Tools in your browser. With DevTools open, select the element you want to apply calc() on, and add a CSS property width to it with the calc() expression. If the expression is invalid it will be negated/struck through.

If it's valid, you'll see the result calculated as the width property of the element. In Chrome, the value is visible in the "Computed" tab. If the expression depends on the width of the browser, resize the window to see the value change in real-time.

A calc() expression that depends on browser width is recomputed in real-time on window resize

Avoiding the issue in the future

If you're linting CSS, you can use a rule that warns you when an operand isn't surrounded by whitespace. In Stylelint, this rule is named function-calc-no-unspaced-operator . This is an ideal solution in a working environment where you want to formalise the process among your colleagues.

Unfortunately, linting CSS doesn't cover the scenario when you're using calc() in the sizes attribute of the img tag.

My advice is to always surround mathematical operands in CSS with whitespace. If you make this a strict rule for yourself, you won't face this issue again when writing calc() expressions in CSS.

Write clean code. Stay ahead of the curve.

Every other Tuesday, I share tips on how to build robust Node.js applications. Join a community of 1,423 developers committed to advancing their careers and gain the knowledge & skills you need to succeed.

No spam! 🙅🏻‍♀️ Unsubscribe at any time.

You might also like

A memory trick to remember when to use for...of vs for...in, getting started with eleventy, understanding "property of undefined" typeerror in javascript.

calc() as CSS unit value

Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)

• 4 - 18 : Not supported
• 19 - 25 : Supported
• 26 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 123 : Supported
• 3.1 - 5.1 : Not supported
• 6 : Supported
• 6.1 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 3.6 : Not supported
• 4 - 15 : Supported
• 16 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 12.1 : Not supported
• 15 - 108 : Supported
• 109 : Supported
• 5.5 - 8 : Not supported
• 9 : Partial support
• 10 : Partial support
• 11 : Partial support

Chrome for Android

Safari on ios.

• 3.2 - 5.1 : Not supported
• 7 - 17.3 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.3 : Not supported
• 4.4 - 4.4.4 : Partial support

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Support can be somewhat emulated in older versions of IE using the non-standard expression() syntax.

Due to the way browsers handle sub-pixel rounding differently, layouts using calc() expressions may have unexpected results.

Safari CSS Reference

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

Supported CSS Properties

Safari and WebKit implement a large subset of the CSS 2.1 Specification defined by the World Wide Web Consortium (W3C), along with portions of the CSS 3 Specification. This reference describes the supported properties and provides Safari availability information. If a property is not listed here, it is not implemented by Safari and WebKit.

The CSS attributes in this article are divided according to the groups defined by the W3C CSS Specification:

Box Model describes properties specific to the bounding boxes of block elements, including borders, padding, and margins. Additional box-related properties specific to tables are described separately in Tables .

Visual Formatting Model describes properties that set the position and size of block elements.

Visual Effects describes properties that adjust the visual presentation of block elements, including overflow behavior, resizing behavior, visibility, animation, transforms, and transitions.

Generated Content, Automatic Numbering, and Lists describes properties that allow you to change the contents of an element, create automatically numbered sections and headings, and manipulate the style of list elements.

Paged Media describes properties associated with controlling appearance attributes specific to printed versions of a webpage, such as page break behavior.

Colors and Backgrounds describes properties that control the background of block-level elements and the color of text content within elements.

Fonts describes properties specific to font selection for text within an element. It also describes properties used in downloadable font definitions.

Text describes properties specific to text styles, spacing, and automatic scrolling (marquee).

Tables describes layout and styling properties specific to table elements.

User Interface describes properties that relate to user interface elements in the browser, such as scrolling text areas, scroll bars, and so on. It also describes properties that are outside the scope of the page content, such as cursor style and the callout shown when you touch and hold a touch target such as a link in iOS.

Defines a variety of border properties for an element within one declaration.

The width of the border on all sides.

The style of the border.

The color of the border.

border-color

Border-style, border-width, border-bottom.

Defines a variety of properties for an element’s bottom border within one declaration.

The width of the bottom border.

border-bottom-color

border-bottom-style

border-bottom-width

Defines the color of the bottom border of an element.

The color of the bottom border.

The value of the element’s color property.

The default color of a hyperlink that is being clicked.

The color that surrounds a UI element, such as a text field, that has focus.

The default color of a hyperlink that has been visited.

The default text color.

activeborder , activecaption , appworkspace , aqua , background , black , blue , buttonface , buttonhighlight , buttonshadow , buttontext , captiontext , fuchsia , gray , graytext , green , grey , highlight , highlighttext , inactiveborder , inactivecaption , inactivecaptiontext , infobackground , infotext , lime , maroon , match , menu , menutext , navy , olive , orange , purple , red , scrollbar , silver , teal , threeddarkshadow , threedface , threedhighlight , threedlightshadow , threedshadow , transparent , white , window , windowframe , windowtext , yellow

Changes to this property can be animated.

Defines the style of the bottom border of an element.

The style of the bottom border.

dashed , dotted , double , groove , hidden , inset , none , outset , ridge , solid

Defines the width of the bottom border of an element.

Length units

medium , thick , thin

Defines the color of an element’s border.

border-left-color

Border-right-color, border-top-color, border-left.

Defines a variety of properties for an element’s left border within one declaration.

The width of the left border.

The style of the left border.

The color of the left border.

border-left-style

border-left-width

Defines the color of the left border of an element.

Defines the style of the left border of an element.

Defines the width of the left border of an element.

border-right

Defines a variety of properties for an element’s right border within one declaration.

The width of the right border.

The style of the right border.

The color of the right border.

border-right-style

border-right-width

Defines the color of the right border of an element.

Defines the style of the right border of an element.

Defines the width of the right border of an element.

Defines the style for an element’s border.

border-top-style

Defines a variety of properties for an element’s top border within one declaration.

The width of the top border.

The style of the top border.

The color of the top border.

border-top-width

Defines the color of the top border of an element.

Defines the style of the top border of an element.

Defines the width of the top border of an element.

Defines the width of the border of an element.

The width of the border.

Defines the width of an element’s outer-element margin.

The width of the margin.

The width of the top margin.

The width of the right margin.

The width of the bottom margin.

The width of the left margin.

margin-bottom

Margin-left, margin-right.

Defines the width of the bottom margin of an element.

Numbers as a percentage, length units

Defines the width of the left margin of an element.

Defines the width of the right margin of an element.

Defines the width of the top margin of an element.

Defines the width of an element’s inner-element padding.

The width of the padding on all sides.

The width of the top padding.

The width of the right padding.

The width of the bottom padding.

The width of the left padding.

padding-bottom

Padding-left, padding-right, padding-top.

Defines the width of the bottom padding of an element.

Defines the width of the left padding of an element.

Defines the width of the right padding of an element.

Defines the width of the top padding of an element.

-webkit-border-bottom-left-radius

Specifies that the bottom-left corner of a box be rounded with the specified radius.

The radius of the rounded corner.

The horizontal radius of the rounded corner.

The vertical radius of the rounded corner.

-webkit-border-bottom-right-radius

-webkit-border-radius

-webkit-border-top-left-radius

-webkit-border-top-right-radius

This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl , these parameters are reversed.)

Available in Safari 3.0 and later.

Available in iOS 1.0 and later.

Experimental CSS 3.

Specifies that the bottom-right corner of a box be rounded with the specified radius.

-webkit-border-image

Specifies an image as the border for a box.

The method of which to produce the image. This could be expressed by the url() syntax, which contains the URI of the image (in the same fashion as the background-image property), or by a procedural function such as gradient() .

The distance from the top edge of the image.

The distance from the right edge of the image.

The distance from the bottom edge of the image.

The distance from the left edge of the image.

The horizontal repeat style.

The vertical repeat style.

The image is tiled.

The image is stretched before it is tiled to prevent partial tiles

The image is stretched to the size of the border.

The specified image is cut into nine pieces according to the length values given. This property applies to any box, including inline elements, but does not apply to table cells if the border-collapse property is set to collapse .

The first five fields are required. The four inset values that follow method represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image as well as vector coordinates.

After the required fields, you can optionally include a border width field or fields, preceded by a slash ( / ). You can specify all four border widths individually or specify a single value that applies to all four fields. If these values are not the same size as the inset values, the slices of the original image are scaled to fit. Note that border-width constants like thick are not valid.

Finally, you can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

Specifies that the corners of a box be rounded with the specified radius.

The radius of the rounded corners.

The horizontal radius of the rounded corners.

The vertical radius of the rounded corners.

Specifies that the top-left corner of a box be rounded with the specified radius.

Specifies that the top-right corner of a box be rounded with the specified radius.

-webkit-box-sizing

Specifies that the size of a box be measured according to either its content (default) or its total size including borders.

The model by which the size of the box is measured.

The box size includes borders in addition to content.

The box size only includes content.

Available in iOS 1.1 and later. (Called box-sizing in iOS 1.0.)

-webkit-box-shadow

Applies a drop shadow effect to the border box of an object.

The horizontal offset of the shadow.

The vertical offset of the shadow.

The blur radius of the shadow.

The color of the shadow.

The box has no shadow.

This property takes four parameters. The first two are horizontal and vertical offsets—down for horizontal, and to the right for vertical. The third value is a blur radius. The fourth value is the color of the shadow. Changes to this property can be animated.

Available in iOS 2.0 and later.

-webkit-margin-bottom-collapse

Specifies the behavior of an element’s bottom margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the bottom margin.

Two adjacent margins are collapsed into a single margin.

The element’s margin is discarded if it is adjacent to another element with a margin.

Two adjacent margins remain separate.

This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.

Available in Safari 3.0 and later. (Called -khtml-margin-bottom-collapse in Safari 2.0.)

Apple extension.

-webkit-margin-collapse

Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the vertical margins.

-webkit-margin-top-collapse

Available in Safari 3.0 and later. (Called -khtml-magin-collapse in Safari 2.0.)

-webkit-margin-start

Provides the width of the starting margin.

The width of the starting margin.

The margin is automatically determined.

If the writing direction is left-to-right, this value overrides margin-left . If the writing direction is right-to-left, this value overrides margin-right .

Available in Safari 3.0 and later. (Called it is -khtml-margin-start in Safari 2.0.)

Specifies the behavior of an element’s top margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the top margin.

Available in Safari 3.0 and later. (Called -khtml-magin-top-collapse in Safari 2.0.)

-webkit-padding-start

Provides the width of the starting padding.

The width of the starting padding.

If the writing direction is left-to-right, this value overrides padding-left . If the writing direction is right-to-left, this value overrides padding-right .

Available in Safari 3.0 and later. (Called -khtml-padding-start in Safari 2.0.)

Visual Formatting Model

Defines the location of the bottom edge of the element for both absolute and relative positioning.

The location of the bottom edge of the element.

Available in Safari 1.0 and later.

Available in iOS 1.0 and later

Defines the sides of an element on which no floating elements are permitted to be displayed.

The sides of the element on which no floating elements can be displayed.

both , left , none , right

Sets the direction in which text is rendered.

The direction of the text.

Defines how an element is displayed onscreen.

The display mode.

The element is displayed in its own flex box.

The element is displayed inline in its own flex box.

block , compact , inline , inline-block , inline-table , list-item , none , run-in , table , table-caption , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , table-row-group

Indicates whether an element (often a graphic) should be pulled out of the normal text flow and floated toward a particular horizontal position within its enclosing element.

The position for the element to be floated toward.

center , left , none , right

If float is set to none , the element is displayed inline wherever it appears within the text flow.

If float is set to a positional value, the element is laid out as it normally would be within the flow, then is moved as far as possible towards the specified position. If an element is vertically positioned such that it would run into another element that is part of the same float, it stops at the point of contact. Thus, in effect, this causes these floating elements to stack up at the specified horizontal position.

If the width of a series of stacked floating elements exceeds the width of the enclosing box, further elements wrap to a new row. You can force an element to always wrap to a new row by setting the clear property on that element. (See clear for more information.)

Note:  With the exception of elements with intrinsic width (an img tag, for example), you should always set the width property on floating elements to ensure consistent behavior across browsers.

Defines the height of a structural element.

The height of the element.

Numbers as a percentage, length units, nonnegative values

auto , intrinsic , min-intrinsic

This property has no effect on inline elements. Changes to this property can be animated.

Defines the location of the left edge of the element for both absolute and relative positioning.

The location of the left edge of the element.

line-height

Defines the vertical interline spacing of lines within the text of an element.

The interline spacing value.

Floating-point numbers, Numbers as a percentage, length units

Defines the maximum height of a structural element.

The maximum height.

intrinsic , min-intrinsic , none

Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the maximum width of a structural element.

The maximum width.

Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the minimum height of a structural element.

The minimum height.

intrinsic , min-intrinsic

Defines the minimum width of a structural element.

The minimum width.

Specifies how to blend the offscreen rendering into the current composite rendering.

The opacity.

Floating-point numbers

Available in Safari 2.0 and later. (Called -khtml-opacity in Safari 1.1.)

Specifies how an element is positioned.

The positioning model for the element.

absolute , fixed , relative , static

This property affects the behavior of positional properties such as float and left / right / top / bottom .

Defines the location of the right edge of the element for both absolute and relative positioning.

The location of the right edge of the element.

Defines the location of the top edge of the element for both absolute and relative positioning.

The location of the top edge of the element.

unicode-bidi

Defines the Unicode bidirectional text algorithm used to display text.

The bidirectional text algorithm.

bidi-override , embed , normal

This property must be set if you intend to change the direction of inline text.

vertical-align

Defines the vertical alignment of elements inline with text.

The vertical alignment of the text.

The center of the element is aligned with the baseline of the text.

baseline , bottom , middle , sub , super , text-bottom , text-top , top

Defines the width of a structural element.

The width of the element.

Overrides the default stacking order of elements.

The z-index of the element.

Formally, the z-index property sets the height of an element above the drawing plane (in pixels). Its primary use is to override the default stacking order of elements.

By default, elements are stacked in the order in which they appear within the DOM tree; later elements appear on top of earlier elements. If you set a z-index value for an element, that element is displayed on top of all elements with a lower z-index value, underneath all elements with a higher z-index value, and stacked according to its position in the DOM tree relative to all elements with the same z-index value.

By default, elements are assigned a z-index value of auto , which is equivalent to zero ( 0 ).

Specifies the magnification of an element.

The magnification of the element.

Numbers as a percentage, floating-point numbers, nonnegative values

A zoom level of 100% .

Specifies that an element not scale at all when a zoom is applied.

Children of elements with the zoom property do not inherit the property, but they are affected by it. The default value of the zoom property is normal , which is equivalent to a percentage value of 100% or a floating-point value of 1.0 .

Available in Safari 4.0 and later.

Visual Effects

Defines the clipping region.

The clipping region.

A clipping region is the portion of an element in which its content will be rendered. The default is to render content within the entire element size.

If you do not use the constant auto , the value should be in the form of a supported shape (currently limited to rect ).

For example, clip: rect(3px 20px 5px 8px); defines a rectangular clip region with a top edge 3 pixels from the top of the element, a right edge 20 pixels from the left edge of the element, a bottom border 5 pixels from the top of the element, and a left border 8 pixels from the left edge of the element.

Defines the treatment of content that overflows the element’s bounds.

The overflow behavior.

This property allows you to choose the behavior for content that overflows the element bounds, such as providing scroll bars or hiding the overflowed content.

Defines the treatment of content that overflows the element’s horizontal bounds.

The content behaves like a marquee.

auto , hidden , overlay , scroll , visible

Stable CSS 3.

Defines the treatment of content that overflows the element’s vertical bounds.

Specifies the directions in which resizing is allowed.

The directions in which resizing is allowed.

auto , both , horizontal , none , vertical

Defines whether or not an element is visible onscreen.

collapse , hidden , visible

Note that elements made invisible using this property still take up space onscreen. Changes to this property can be animated.

Available in Safari 1.0 and later. (All supported except for collapse .)

-webkit-animation

Combines common animation properties into a single property.

See -webkit-animation-name for details.

See -webkit-animation-duration for details.

See -webkit-animation-timing-function for details.

See -webkit-animation-delay for details.

See -webkit-animation-iteration-count for details.

See -webkit-animation-direction for details.

Refer to the respective property for details of each property and default values.

-webkit-animation-delay

Defines when an animation starts.

The time to begin executing an animation after it is applied. If 0 , the animation executes as soon as it is applied. If positive, it specifies an offset from the moment the animation is applied, and the animation delays execution by that offset. If negative, the animation executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the animation. Nonzero values must specify a unit: s for seconds, ms for milliseconds. The default value is 0 .

The animation begins immediately.

This property allows an animation to begin execution some time after it is applied.

-webkit-animation-direction

Determines whether the animation should play in reverse on alternate iterations.

The direction to play. The default value is normal .

Play each iteration of the animation in the forward direction.

Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.

When an animation is played in reverse, the timing functions are also reversed. For example, when played in reverse, an ease-in animation appears as an ease-out animation.

-webkit-animation-duration

Specifies the length of time that an animation takes to complete one iteration.

The duration of an animation. If 0 , the animation iteration is immediate (there is no animation). A negative value is treated as 0 . The default value is 0 .

-webkit-animation-fill-mode

Specifies whether the effects of an animation are apparent before the animation starts and after it ends.

The animation’s fill mode. Can be none , forwards , backwards , or both .

The effects of the animation are apparent only during the defined duration of the animation.

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

The animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay .

The animation’s initial keyframe is applied as soon as the animation style is applied to an element, and the animation’s final keyframe continues to apply after the final iteration of the animation completes. The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay .

By default, an animation starts as soon as the style that describes the animation is applied to an element; however, the -webkit-animation-delay property can delay the start of an animation. Specifying a value of backwards or both for this property overrides the -webkit-animation-delay property and tells the animation to start as soon as the style is applied.

Available in Safari 5.0 and later.

Available in iOS 4.0 and later.

-webkit-animation-iteration-count

Specifies the number of times an animation iterates.

The number of iterations. If 1 , the animation plays from beginning to end once. A value of infinite causes the animation to repeat forever. Noninteger values cause the animation to end partway through an iteration. Negative values are invalid. The default value is 1 .

Repeats the animation forever.

This property is often used with a -webkit-animation-direction property set to alternate , which causes the animation to play in reverse on alternate iterations.

-webkit-animation-name

Specifies the name of an animation.

The name of the animation.

The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe at-rule, there are no properties to be animated and the animation is not executed. See @-webkit-keyframes for a description of this rule.

If "none" , no animation is executed even if there is a -webkit-keyframe at-rule with that name. Setting this property to "none" explicitly disables animations.

The default value is "" .

-webkit-animation-play-state

Determines whether the animation is running or paused.

The state of an animation.

Plays the animation.

Pauses the animation.

A running animation can be paused by setting this property to paused . Set this property to running to continue running a paused animation. A paused animation continues to display the current value of the animation in a static state. When a paused animation is resumed, it restarts from the current value, not from the beginning of the animation.

The default value is running .

-webkit-animation-timing-function

Defines how an animation progresses between keyframes.

The function to apply between keyframes. The default value is ease .

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) .

Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) .

Equivalent to cubic-bezier(0, 0, 0.58, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) .

Equivalent to steps(1, end) .

Available in iOS 5.0 and later.

Available in Safari 5.1 and later.

Equivalent to steps(1, start) .

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function. See Timing Functions for additional information about timing functions.

This property applies between keyframes, not over the entire animation. For example, for an ease-in-out timing function, an animation eases in at the start of the keyframe and eases out at the end of the keyframe. A -webkit-animation-timing-function defined within a keyframe block applies to that keyframe; otherwise, the timing function specified for the animation is used.

-webkit-backface-visibility

Determines whether or not a transformed element is visible when it is not facing the screen.

Determines whether or not the back face of a transformed element is visible. The default value is visible .

The element is always visible even when it is not facing the screen.

The element is invisible if it is not facing the screen.

Use this property to specify whether or not an element is visible when it is not facing the screen. For example, if the identity transform is set, an element faces the screen; otherwise, it may face away from the screen. For example, applying a rotation about y of 180 degrees in the absence of any other transforms causes an element to face away from the screen.

This property is useful when you place two elements back to back, as you would do to create a playing card. Without this property, the front and back elements could at times switch places during an animation to flip the card. Another example is creating a box out of six elements whose outside and inside faces can be viewed. This is useful when creating the backdrop for a three-dimensional stage.

-webkit-box-reflect

Defines a reflection of a border box.

The position of the reflection relative to the border box. Can be above , below , left , or right .

The distance of the reflection from the edge of the border box, in length units or as a percentage. The default value is 0 .

Used to overlay the reflection. If omitted, the reflection has no mask.

The reflection appears above the border box.

The reflection appears below the border box.

The reflection appears to the left of the border box.

The reflection appears to the right of the border box.

Reflections will update automatically as the source changes. Specifying a reflection has the effect of creating a stacking context (like opacity, masks, and transforms). The reflection is non-interactive, and as such, it has no effect on hit testing. The reflection has no effect on layout, other than being part of a container’s overflow; it is similar to -webkit-box-shadow in this respect.

-webkit-mask

Defines a variety of mask properties within one declaration.

See -webkit-mask-attachment for details.

See -webkit-mask-clip for details.

See -webkit-mask-origin for details.

See -webkit-mask-image for details.

See -webkit-mask-repeat for details.

See -webkit-mask-composite for details.

As with most composite properties, all arguments are optional.

-webkit-mask-attachment

Defines the scrolling or fixed nature of the image mask.

If fixed , the mask does not move when the page scrolls; if scroll , the image moves when the page scrolls.

-webkit-mask-box-image

Defines an image to be used as a mask for a border box.

The file path of the image.

The uri field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.

You can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

-webkit-mask-clip

Specifies whether the mask should extend into the border of a box.

The clipping behavior of the mask.

-webkit-mask-composite

Sets a compositing style for a mask.

The compositing style of the mask.

The default value is border , which means that the background extends into the border area. Specifying a value of padding limits the background so that it extends only into the padding area enclosed by the border.

-webkit-mask-image

Defines an image to be used as a mask for an element.

-webkit-mask-origin

Determines where the -webkit-mask-position property is anchored.

The origin of the mask position.

The mask’s position is anchored at the upper-left corner of the element’s border.

The mask’s position is anchored at the upper-left corner of the element’s content.

The mask’s position is anchored at the upper-left corner of the element’s padding.

-webkit-mask-position

Defines the position of a mask.

The x-coordinate of the position of the mask.

The y-coordinate of the position of the mask.

Position can be specified in terms of pixels or percentages of the viewport width or using the keywords top , left , center , right , or bottom .

Changes to this property can be animated in Safari 4.0 and later.

-webkit-mask-position-x

Defines the x-coordinate of the position of a mask.

-webkit-mask-position-y

Defines the y-coordinate of the position of a mask.

-webkit-mask-repeat

Defines the repeating qualities of a mask.

The repeating behavior of the mask.

This property controls whether tiling of an element’s mask should occur in the x direction, the y direction, both, or neither.

-webkit-mask-size

Overrides the size of a mask.

The width and height of the mask.

The width of the mask.

The height of the mask.

-webkit-perspective

Gives depth to a scene, causing elements farther away from the viewer to appear smaller.

The distance in pixels from the viewer’s position to the z= 0 plane. The default value is none .

No perspective transform is applied.

The -webkit-perspective property applies the same transform as the perspective(<number>) transform function, except that it applies only to the children of the element, not to the transform on the element itself.

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative ), just as the -webkit-transform property does.

This transform alters the effect of other transforms. In the absence of additional transforms, this transform has no effect.

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

-webkit-perspective-origin

Sets the origin of the -webkit-perspective property described in -webkit-perspective .

The x-origin as a percentage or value.

The y-origin as a percentage or value.

Sets the y-origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y-origin. If it appears after top or bottom , specifies the x-origin. If appears alone, centers both the x and y origin.

Sets the y-origin to the bottom of the element’s border box.

Sets the x-origin to the left side of the border box.

Sets the x-origin to the right side of the border box.

This property effectively sets the x and y position at which the viewer appears to be looking at the children of the element. The default value is 50% for both x and y coordinates.

-webkit-transform

Specifies transformations to be applied to an element.

A transform function. Possible values are described in Transform Functions

No transforms are applied.

The -webkit-transform property specifies a list of transformations, separated by whitespace, to be applied to an element, such as rotation, scaling, and so on.

The set of transform functions is similar to those allowed by SVG, although there are additional functions to support 3D transformations. If multiple transforms are applied, the transform is generated by performing a matrix concatenation of each transform in the list.

For example, the following div element is rotated 45 degrees clockwise:

If a list of transforms is provided, the net effect is as if each transform is specified separately in the order provided.

The default value is none (no transforms applied).

Available in Safari 3.1 and later.

-webkit-transform-origin

Sets the origin for the -webkit-transform property.

The x origin as a percentage or value.

The y origin as a percentage or value.

Sets the y origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y origin. If this constant appears after top or bottom , specifies the x origin. If it appears alone, centers both the x and y origin.

Sets the y origin to the bottom of the element’s border box.

Sets the x origin to the left side of the border box.

Sets the x origin to the right side of the border box.

The -webkit-transform-origin property establishes the origin for transforms applied to an element with respect to its border box.

The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50% causes transformations to occur around the element’s center. Changing the origin to 100% 0% causes transformation to occur around the top-right corner of the element. The default value is 50% 50% .

If only one argument is provided, it is interpreted as the horizontal position.

Available in Safari 3.1 and Later.

-webkit-transform-origin-x

The x coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-y

The y coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-z

The z coordinate of the origin for transforms applied to an element with respect to its border box.

The z origin as a percentage or value.

-webkit-transform-style

Defines how nested, transformed elements are rendered in 3D space.

The transform style.

Flatten all children of this element into the 2D plane.

Preserve the 3D perspective.

If -webkit-transform-style is flat , all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the x or y axes causes children positioned at positive or negative z positions to appear on the element’s plane, rather than in front of or behind it. If -webkit-transform-style is preserve-3d , this flattening is not performed, so children maintain their position in 3D space.

This flattening takes place at each element, so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value preserve-3d for -webkit-transform-style . But -webkit-transform-style affects only an element’s children; the leaf nodes in a hierarchy do not require the preserve-3d style.

The default value is flat .

-webkit-transition

Combines -webkit-transition-delay , -webkit-transition-duration , -webkit-transition-property , and -webkit-transition-timing-function into a single property.

See -webkit-transition-property for details.

See -webkit-transition-duration for details.

See -webkit-transition-timing-function for details.

See -webkit-transition-delay for details.

-webkit-transition-delay

Defines when the transition starts.

The time to begin executing a transition after it is applied. If 0 , the transition executes as soon as the property changes. Otherwise, the value specifies an offset from the moment the property changes, and the transition delays execution by that offset. If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the transition. Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

The transition begins immediately.

-webkit-transition-duration

Defines how long the transition from the old value to the new value should take.

If 0 , the transition is immediate (there is no animation). A negative value is treated as 0 . Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

-webkit-transition-property

Specifies the name of the CSS property to which the transition is applied.

The name of the transition. You can list multiple properties. Property names should be bare, unquoted names. The default value is all .

No transition specified.

The default transition name.

-webkit-transition-timing-function

Specifies how the intermediate values used during a transition are calculated.

The timing function.

This property allows for a transition to change speed over its duration. These effects, commonly called easing functions, are mathematical functions that produce a smooth curve.

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function.

The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.

The default value is ease .

Generated Content, Automatic Numbering, and Lists

Embeds an arbitrary batch of content (such as a movie or a specially formatted string) to be embedded alongside a CSS property.

The file path of the content.

A function that procedurally generates an image, such as gradient .

counter-increment

Increments a numerical counter for auto-numbering.

The name of the counter.

The amount by which the counter increments.

This property is commonly used in conjunction with the content property to create section numbers or other auto-numbered containers. For example:

This snippet inserts “Section 1:” at the beginning of the first heading, “Section 2:” at the beginning of the second, and so on.

Important:  You must use the counter-reset property to reset the counter on some element that appears in the DOM tree prior to the first element where you use counter-increment on that counter. Otherwise, this call increments a nonexistent counter and all of your sections will be numbered "Section 1”.

counter-reset

Resets a counter used by the counter-increment property and the counter function.

For an example of this property, see the documentation for counter-increment .

Defines the display style for a list and list elements.

The type of list.

The position of the list marker.

The file path of an image to be used as the list marker.

list-style-image

List-style-position, list-style-type.

Defines an image to use as the opening symbol of a list element.

Defines the position of the marker of a list element.

The position of the marker.

The marker is placed inside the text. Wrapping text appears directly below the marker.

The text of the list item is indented from the marker.

Defines the type of marker of a list element.

The type of marker.

armenian , circle , cjk-ideographic , decimal , decimal-leading-zero , disc , georgian , hebrew , hiragana , hiragana-iroha , katakana , katakana-iroha , lower-alpha , lower-greek , lower-latin , lower-roman , none , square , upper-alpha , upper-latin , upper-roman

Paged Media

Defines the minimum number of lines in a paragraph that must be left at the bottom of a page (before a page break).

The number of lines.

Available in Safari 1.3 and later.

page-break-after

Defines the page break behavior following an element's definition.

The page break behavior.

always , auto , avoid , left , right

Safari 1.2 and later.

page-break-before

Defines the page break behavior before an element's definition.

page-break-inside

Defines the page break behavior within an element.

auto , avoid

Safari 1.3 and later.

Defines the minimum number of lines in a paragraph that must be left at the top of a page (after a page break).

Colors and Backgrounds

Defines a variety of background properties within one declaration.

The background color.

The file path of the background image.

The repeating behavior of the background image.

If fixed , the background image does not move when the page scrolls; if scroll , the image moves when the page scrolls.

The position of the background image.

background-attachment

Defines the scrolling or fixed nature of the page background.

scroll , fixed

background-color

Defines an element’s background color.

background-image

Defines an element’s background image.

background-position

Defines the origin of a background image.

The x-coordinate of the origin of the background image.

The y-coordinate of the origin of the background image.

background-position-x

Defines the x-coordinate of the origin of a background image.

background-position-y

Defines the y-coordinate of the origin of a background image.

background-repeat

Defines the repeating qualities of the background image.

This property controls whether tiling of an element’s background image should occur in the x direction, the y direction, both, or neither.

Defines the color of the text of an element.

The color. Colors can be specified with a constants, an RGB value, or a hexadecimal value.

-webkit-background-clip

Specifies the clipping behavior of the background of a box.

The clipping behavior of the background.

The background clips to the border of the box.

The background clips to the content of the box.

The background clips to the padding of the box.

The background clips to the text of the box.

-webkit-background-composite

Sets a compositing style for background images and colors.

The compositing style of the background.

Under development.

-webkit-background-origin

Determines where the background-position property is anchored.

The origin of the background position.

The background position can be anchored at the upper-left corner of the border, the upper-left corner of the padding area inside the border, or the upper-left corner of the content inside the padding area.

-webkit-background-size

Overrides the size of a background image.

The width and height of the background image.

The width of the background image.

The height of the background image.

Defines a variety of properties for an element’s text font within one declaration.

The style of the font.

The variant of the font.

The weight, or boldness, of the font.

The size of the font.

The distance between lines.

The family of the font.

The user interface style to replicate.

The style of the text of a standard size UI element, such as a button.

The style of the text of a miniature size UI element, such as a button.

The style of the text of a small size UI element, such as a button.

caption , icon , menu , message-box , small-caption , status-bar

In addition to declaring a font style explicitly by characteristics, you can also specify a user interface style using constants such as caption . These constants represent the default font style for the specified user interface element, and as such, their specific values are dependent on the browser, the operating system, and user configuration options.

Using the font property resets all related font properties that are not explicitly specified.

font-family

Defines a list of fonts for element styling or downloadable font definitions.

The font-family property has two different meanings, depending on context.

In the context of an element style, it defines a font to use for text within an element. Because not all computers have the same fonts available, this property to specify multiple acceptable fonts in descending order of preference. In addition, constants such as serif or sans-serif provide generic fallback fonts in case a browser does not have any of the listed fonts available.

In the context of a downloadable font definition, this property provides the name of the font that the font definition describes. In this form, you may specify multiple family names for the font, but generally only a single family name (optionally, specify that it should match against generic font names like serif ).

For more information about downloadable font definitions, see @font-face .

Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.

Defines the font size for the text in an element or in a downloadable font definition.

large , larger , medium , small , smaller , -webkit-xxx-large , x-large , x-small , xx-large , xx-small

Changes to this property can be animated in Safari 4.0 and later. For more information about downloadable font definitions, see @font-face .

Defines the font style for the text in an element or a downloadable font definition.

italic , normal , oblique

font-variant

Defines special font properties for the text in an element or for a downloadable font definition.

normal , small-caps

Available in Safari 1.0 and later. (The value small-caps is not supported.) Downloadable fonts supported in Safari 3.1 and later.

font-weight

Defines the font weight of the text in an element or for a downloadable font definition.

Integers, nonnegative values

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , bold , bolder , lighter , normal

Provides a list of locations for a downloadable font definition.

This property takes a comma-delimited list of font locations which may be locally installed font family names or HTTP URLs.

unicode-range

Describes the unicode characters supported by a downloadable font definition.

The range of supported characters.

The first character in a range of supported characters.

The last character in a range of supported characters.

This property takes a comma-delimited list of Unicode character ranges. There are two supported formats: singleton ranges and pair ranges.

A singleton range is in the form U+xxxx where xxxx is a hexadecimal number. For example, the range U+2150 indicates that Unicode character 0x2150 is supported. Leading zeroes may be omitted, so U+300 is the same as U+0300 . The following snippet shows a singleton range: unicode-range: U+2150;

A singleton range may also contain wildcards in the form of a question-mark character. For example, U+36?? contains two wildcard characters. This range matches any value in which the first two digits are 36 , without regard to the value for the last two digits. The following snippet shows a wildcard range that represents the Unicode characters 0x2160 through 0x216f, inclusive: unicode-range: U+216?;

A pair range is in the form of a hyphen-separated pair of hexadecimal values in the form U+xxxx-yyyy where xxxx and yyyy are hexadecimal numbers. For example, the following pair range represents the Unicode characters from 0x2164 through 0x2156 , inclusive: unicode-range: U+2154-2156;

letter-spacing

Defines the horizontal interletter spacing of characters within the text of an element.

The size of the character spacing.

Defines the alignment for inline content within an element.

The inline content alignment.

Text is aligned to the default alignment.

Text is aligned to the center.

Text is aligned to the left.

Text is aligned to the right.

center , end , justify , left , right , start

text-decoration

Defines special styling for text, such as underlines.

The type of decoration.

line-through , none , overline , underline

text-indent

Defines the amount to indent the first line of text within an element.

The amount to indent.

text-overflow

Controls overflow of non-wrapped text.

clip , ellipsis

This property controls how Safari displays text that exceeds the specified width of the enclosing paragraph if the overflow property is set to hidden and style rules or nowrap tags prevent the text from wrapping (or if a single word is too long to fit by itself).

text-shadow

Defines a variety of properties for an element’s text shadow within one declaration.

Although the CSS specification allows it, multiple shadows are not supported in Safari. Changes to this property can be animated.

text-transform

Defines a capitalization transformation for the text in an element.

The capitalization transformation.

capitalize , lowercase , none , uppercase

white-space

Defines how whitespace characters in an element are handled onscreen.

The policy for displaying whitespace in the element.

normal , nowrap , pre , pre-line , pre-wrap

Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.

The level of strictness.

break-all , break-word , normal

word-spacing

Defines the amount of space between words.

The amount of spacing.

Specifies word-splitting behavior for wrapping lines that are too long for the enclosing box and contain no spaces.

The wrapping behavior.

break-word , normal

Available in Safari 2.0 and later.

-webkit-marquee

Defines properties for showing content as though displayed on an electronic marquee sign.

The direction of the marquee.

The distance the marquee moves in each increment

The number of times the marquee repeats.

The style of the marquee’s motion.

The scroll or slide speed of the marquee.

-webkit-marquee-direction

-webkit-marquee-increment, -webkit-marquee-repetition, -webkit-marquee-speed, -webkit-marquee-style.

Available in Safari 3.0 and later. (Called -khtml-marquee in Safari 2.0.)

Available in iOS 1.0.

Specifies the direction of motion for a marquee box.

The marquee moves from bottom to top.

The marquee moves in the default direction.

The marquee moves from right to left.

The marquee moves from left to right.

The marquee moves from top to bottom.

Available in Safari 3.0 and later. (Called -khtml-marquee-direction in Safari 2.0.)

Defines the distance the marquee moves in each increment.

The marquee moves a large amount in each increment.

The marquee moves a medium amount in each increment.

The marquee moves a small amount in each increment.

Available in Safari 3.0 and later. (Called -khtml-marquee-increment in Safari 2.0.)

Specifies the number of times a marquee box repeats (or infinite ).

The marquee repeats infinitely.

Available in Safari 3.0 and later. (Called -khtml-marquee-repetition in Safari 2.0.)

Defines the scroll or slide speed of a marquee box.

The distance term in the speed equation.

The time term in the speed equation.

Integers, time units, nonnegative values

The marquee moves at a fast speed.

The marquee moves at a normal speed.

The marquee moves at a slow speed.

This property can either take one speed parameter ( slow , for example) or a measure of distance and a measure of time separated by a slash ( / ).

Available in Safari 3.0 and later. (Called -khtml-marquee-speed in Safari 2.0.)

Specifies the style of marquee motion.

The marquee shifts back and forth.

The marquee does not move.

The marquee loops in its specified direction.

The marquee moves in its specified direction, but stops either when the entirety of its content has been displayed or the content reaches the opposite border of its box, whichever comes second.

The values scroll and slide both cause the content to start outside the box and move into the box, but if the value scroll is specified, the content stops moving once the last content is visible. The value alternate causes the content to shift back and forth within the box in the specified direction.

Available in Safari 3.0 and later. (Called -khtml-marquee-style in Safari 2.0.)

-webkit-text-fill-color

Specifies a fill color for text.

The fill color. Colors can be specified with a constant, an RGB value, or a hexadecimal value.

If not specified, the color specified by the color property is used. -webkit-fill-color is commonly used in combination with -webkit-text-stroke . Changes to this property can be animated.

-webkit-text-security

Specifies the shape to use in place of letters in a password input field.

The shape to use in place of letters.

A circle shape.

A disc shape.

No shape is used.

A square shape.

-webkit-text-size-adjust

Specifies a size adjustment for displaying text content in Safari on iOS.

The size at which to display text in Safari on iOS.

The text size is automatically adjusted for Safari on iOS.

The text size is not adjusted.

Apple extension—Safari on iOS only.

-webkit-text-stroke

Specifies the width and color of the outline (stroke) of text.

The width of the stroke.

The color of the stroke.

-webkit-text-stroke-color

-webkit-text-stroke-width.

This property is commonly used in combination with -webkit-text-fill-color .

Specifies the color of the outline (stroke) of text.

If not specified, the color specified by the color property is used. -webkit-text-stroke-color is commonly used in combination with -webkit-text-fill-color . Changes to this property can be animated.

Specifies the width for the text outline.

A medium stroke.

A thick stroke.

A thin stroke.

This property is significant only in combination with -webkit-text-stroke-color .

-webkit-line-break

Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.

The line-breaking setting.

The line breaks after white space.

A standard line-breaking rule.

Available in Safari 3.0 and later. (Called -khtml-line-break in Safari 2.0.)

-webkit-appearance

Changes the appearance of buttons and other controls to resemble native controls.

The appearance of the control.

The indicator that appears in a password field when Caps Lock is active.

Available in iOS 2.0 and later

button , button-bevel , caret , checkbox , default-button , listbox , listitem , media-fullscreen-button , media-mute-button , media-play-button , media-seek-back-button , media-seek-forward-button , media-slider , media-sliderthumb , menulist , menulist-button , menulist-text , menulist-textfield , none , push-button , radio , searchfield , searchfield-cancel-button , searchfield-decoration , searchfield-results-button , searchfield-results-decoration , slider-horizontal , slider-vertical , sliderthumb-horizontal , sliderthumb-vertical , square-button , textarea , textfield

The following constants are unsupported in Safari 4.0:

scrollbarbutton-down , scrollbarbutton-left , scrollbarbutton-right , scrollbarbutton-up , scrollbargripper-horizontal , scrollbargripper-vertical , scrollbarthumb-horizontal , scrollbarthumb-vertical , scrollbartrack-horizontal , scrollbartrack-vertical

-webkit-nbsp-mode

Defines the behavior of nonbreaking spaces within text.

The behavior of nonbreaking spaces.

Nonbreaking spaces are treated as usual.

Nonbreaking spaces are treated like standard spaces.

Available in Safari 3.0 and later. (Called -khtml-nbsp-mode in Safari 2.0.)

-webkit-rtl-ordering

Overrides ordering defaults for right-to-left content.

The order of the content.

Raw content is in mixed order (requiring a bidirectional renderer).

Right-to-left content is encoded in reverse order so an entire line of text can be rendered from left to right in a unidirectional fashion.

The distinction between these two character orders is normally handled automatically as a side effect of character set. This property allows you to override whether the browser should treat the content as being in logical or visual order.

-webkit-user-drag

Specifies that an entire element should be draggable instead of its contents.

The dragging behavior of the element.

The default dragging behavior is used.

The entire element is draggable instead of its contents.

The element cannot be dragged at all.

Available in Safari 3.0 and later. (Called -khtml-user-drag in Safari 2.0.)

-webkit-user-modify

Determines whether a user can edit the content of an element.

The user modification policy.

The content is read-only.

The content can be read and written.

The content can be read and written, but any rich formatting of pasted text is lost.

This is closely related to the contentEditable attribute.

Available in Safari 3.0 and later. (Called -khtml-user-modify in Safari 2.0.)

-webkit-user-select

Determines whether a user can select the content of an element.

The user selection policy.

The user can select content in the element.

The user cannot select any content.

The user can select text in the element.

Available in Safari 3.0 and later. (Called -khtml-user-select in Safari 2.0.)

Available in iOS 3.0 and later.

border-collapse

Defines the model of an element’s border.

collapse , separate

border-spacing

Defines the spacing between an element’s border and the content within.

The size of the spacing.

-webkit-border-horizontal-spacing

-webkit-border-vertical-spacing, caption-side.

Defines the side of a table on which its caption appears.

The side of the table that will have a caption.

bottom , left , right , top

empty-cells

Sets the border behavior for cells with no content.

The behavior for cells with no content.

hide , show

table-layout

Specifies whether to use automatic or fixed table layout.

If auto , layout is determined by all cells in the table; if fixed , layout is determined by the first row of content only.

auto , fixed

Automatic table layout, specified by the value auto , is the default table layout behavior. In this mode, the table layout is calculated based on the contents of every cell in every row of the table.

Fixed table layout, specified by the value fixed , is a faster (but more restrictive) layout behavior. In this layout mode, the layout of the table is calculated based only on the first row of tabular content (not including any heading rows). This mode allows the layout to be calculated much earlier in the page load process and greatly simplifies the calculations, but can cause content in later rows to overflow the table’s boundaries.

Defines the spacing between the horizontal portion of an element’s border and the content within.

The amount of horizontal spacing.

Length units, nonnegative values

Equivalent to the horizontal portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-horizontal-spacing in Safari 2.0.)

Defines the spacing between the vertical portion of an element’s border and the content within.

The amount of vertical spacing.

Equivalent to the vertical portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-vertical-spacing in Safari 2.0.)

-webkit-column-break-after

Determines whether a column break can and should occur after an element in a multicolumn flow layout.

The column break policy.

A column break is always inserted after the element.

A right column break is inserted after the element where appropriate.

Column breaks are avoided after the element.

A left column break is inserted after the element.

A right column break is inserted after the element.

-webkit-column-break-before

Determines whether a column break can and should occur before an element in a multicolumn flow layout.

A column break is always inserted before the element.

A right column break is inserted before the element where appropriate.

Column breaks are avoided before the element.

A left column break is inserted before the element.

A right column break is inserted before the element.

-webkit-column-break-inside

Determines whether a column break should be avoided within the bounds of an element in a multicolumn flow layout.

A right column break is inserted within the element where appropriate.

Column breaks are avoided within the element.

-webkit-column-count

Specifies the number of columns desired in a multicolumn flow.

The number of columns in the multicolumn flow.

The element has one column.

-webkit-column-gap

Specifies the space between columns in a multicolumn flow.

The width of the gap.

Columns in the element have the normal gap width between them.

-webkit-column-rule

Specifies the color, style, and width of the column rule.

The width of the column rule.

The style of the column rule.

The color of the column rule.

-webkit-column-rule-color

-webkit-column-rule-style, -webkit-column-rule-width.

The column rule appears in the middle of the column gap in a multicolumn flow layout.

Specifies the color of the column rule.

Specifies the style of the column rule.

The column rule has a dashed line style.

The column rule has a dotted line style.

The column rule has a double solid line style.

The column rule has a grooved style.

The column rule is hidden.

The column rule has an inset style.

The column rule has no style.

The column rule has an outset style.

The column rule has a ridged style.

The column rule has a solid line style.

Specifies the width of the column rule.

The column rule has a medium width.

The column rule has a thick width.

The column rule has a thin width.

-webkit-column-width

Specifies the width of the column in a multicolumn flow.

The width of the column.

Columns in the element are of normal width.

-webkit-columns

A composite property that specifies the width and number of columns in a multicolumn flow layout.

The width of each column.

The number of columns.

User Interface

Defines the cursor to display onscreen when the pointer is over an element.

The type of cursor.

An open hand cursor indicating the element can be grabbed.

A closed hand cursor indicating the element has been grabbed.

A zoom-in cursor.

A zoom-out cursor.

alias , all-scroll , auto , cell , col-resize , context-menu , copy , crosshair , default , e-resize , ew-resize , hand , help , move , n-resize , ne-resize , nesw-resize , no-drop , none , not-allowed , ns-resize , nw-resize , nwse-resize , pointer , progress , row-resize , s-resize , se-resize , sw-resize , text , vertical-text , w-resize , wait

Although the CSS specification allows it, Safari does not support custom cursors.

Available in Safari 1.2 and later.

Defines a variety of properties for an element’s outline (drawn outside the element’s border) within one declaration.

The color of the outline.

The style of the outline.

The width of the outline.

outline-color

Outline-style, outline-width.

Defines the color of an element’s outline.

outline-offset

Defines the offset of an element’s outline from its border.

The size of the offset.

Defines the style of an element’s outline.

Defines the width of an element's outline.

pointer-events

Defines the parts of an element that responds to pointer events, such as a click, mouse over, or hover.

The parts of the element that respond to pointer events.

The entire element responds to pointer events.

The element does not respond to pointer events.

Providing a value of none does not disable the Inspect Element option that appears when the element is Control-clicked, however the option may return the wrong element.

-webkit-box-align

Specifies the alignment of nested elements within an outer flexible box element.

The alignment of nested elements.

Elements are aligned with the baseline of the box.

Elements are aligned with the center of the box.

Elements are aligned with the end of the box.

Elements are aligned with the start of the box.

Elements are stretched to fill the box.

This property specifies the horizontal alignment if the box direction is vertical, and vice versa. This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-align in Safari 1.1 through Safari 2.0.)

-webkit-box-direction

Specifies the direction in which child elements of a flexible box element are laid out.

The layout direction.

Elements are laid out in the default direction.

Elements are laid out in the reverse direction.

This applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-direction in Safari 1.1 through Safari 2.0.)

-webkit-box-flex

Specifies an element’s flexibility.

The flexibility of the element.

Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.

This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-flex in Safari 1.1 through Safari 2.0.)

-webkit-box-flex-group

Specifies groups of dynamically resizing elements that are adjusted to be the same size.

The group number of the flexible element.

During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.

Available in Safari 3.0 and later. (Called -khtml-box-flex-group in Safari 1.1 through Safari 2.0.)

-webkit-box-lines

Specifies whether a flexible box should contain multiple lines of content.

If multiple , the flexible box can contain multiple lines of content; if single , only one line is allowed.

The box can contain multiple lines of content.

The box can contain only one line of content.

Available in Safari 3.0 and later. (Called -khtml-box-lines in Safari 1.1 through Safari 2.0.)

-webkit-box-ordinal-group

Specifies a rough ordering of elements in a flexible box.

The ordinal group number of the element.

Elements with lower ordinal group values are displayed first.

Available in Safari 3.0 and later. (Called -khtml-box-ordinal-group in Safari 1.1 through Safari 2.0.)

-webkit-box-orient

Specifies the layout of elements nested within a flexible box element.

The orientation of elements nested in the flexible box.

Elements are oriented along the box’s axis.

Elements are oriented horizontally.

Elements are oriented along the inline axis.

Elements are oriented vertically.

Available in Safari 3.0 and later. (Called -khtml-box-orient in Safari 1.1 through Safari 2.0.)

-webkit-box-pack

Specifies alignment of child elements within the current element in the direction of orientation.

The alignment of child elements.

Child elements are aligned to the center of the element.

Child elements are aligned to the end of the element.

Child elements are justified with both the start and end of the element.

Child elements are aligned to the start of the element.

For elements whose children are aligned horizontally, a packing value of start indicates left alignment with extra space towards the right side, a value of end indicates right alignment with extra space to the left, a value of center indicates center alignment with extra space split evenly on either side, and a value of justify indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.

Similarly, for elements whose children are aligned vertically, a value of start indicates that the elements should be aligned to the top, a value of end indicates that the elements should be aligned to the bottom, and so on.

This property is similar to -webkit-box-align , which specifies alignment in the opposite direction from the direction of orientation.

Available in Safari 3.0 and later. (Called -khtml-box-pack in Safari 1.1 through Safari 2.0.)

-webkit-dashboard-region

Specifies the behavior of regions in a Dashboard widget.

No behavior is specified.

This property is described in more detail in Declaring Control Regions in Dashboard Programming Topics .

Available in Safari 3.0 and later. (Called -apple-dashboard-region in Safari 2.0.)

Apple extension—Dashboard only.

-webkit-overflow-scrolling

Specifies whether to use native-style scrolling in an overflow:scroll element.

The style of scrolling.

One finger scrolling without momentum.

Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

The default value is auto .

-webkit-tap-highlight-color

Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.

The tapped link color.

This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.

Available in iOS 1.1.1 and later.

-webkit-touch-callout

Disables the default callout shown when you touch and hold a touch target.

The touch callout behavior.

On iOS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. This property allows you to disable that callout.

The current allowable values are none and inherit .

Additional Unsupported Properties

WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:

Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.

Properties that are in a very early stage of development and are not really usable yet.

Properties that are used within WebKit itself and cannot be parsed in a CSS file.

Properties that are parsed for historical reasons, but that are not actually used.

Because these properties are unsupported, they are not documented in detail. However, they are listed here so that if you find them in the source code, in test cases, and so on, you will be able to determine their status.

WebKit-Specific Unsupported Properties

-webkit-border-fit

-webkit-font-size-delta

-webkit-highlight

-webkit-line-clamp

-webkit-match-nearest-mail-blockquote-color

-webkit-text-decorations-in-effect

-webkit-transition-repeat-count

Unsupported Properties from the CSS Specification

font-size-adjust —Describes the font aspect ratio to preserve proportionality in the event of font substitution. Unsupported CSS 2 property; removed in CSS 2.1; reintroduced in CSS 3.

font-stretch —Selects a normal, condensed, or extended variant of a font in an element or describes availability of these variants in a font definition. Declared in CSS 2.1/CSS 3.

marker-offset —Sets the offset of a marker (a bullet in a bulleted list, for example). Unsupported CSS 2 property; removed in CSS 2.1.

marks —Sets what type of crop marks to use on paged media. Unsupported CSS 2 property; removed in CSS 2.1.

page —Used for named page support. Unsupported CSS 2 property; removed in CSS 2.1.

quotes —Sets the quotation mark characters used for nested <q> tags.

size —Sets page dimensions for paged media. Unsupported CSS 2 property; removed in CSS 2.1.

speak-header —Sets whether a browser should speak the contents of the corresponding table heading cell before speaking the contents of each cell. Unsupported CSS 2 aural media property. Aural media deprecated in CSS 2.1. Property reintroduced in CSS 3

text-line-through —Composite property describing overstrike color, style, and mode. Declared in CSS 3.

text-line-through-color —Describes color for overstrike. Declared in CSS 3.

text-line-through-mode —Describes the mode for overstrike. Declared in CSS 3.

text-line-through-style —Describes the style for overstrike. Declared in CSS 3.

text-line-through-width —Describes the width for overstrike. Declared in CSS 3.

text-overline —Composite property describing overline color, style, mode, and width(like underline, but above the text). Declared in CSS 3.

text-overline-color —Describes the color of overline (like underline, but above the text). Declared in CSS 3.

text-overline-mode —Describes the mode of overline (like underline, but above the text). Declared in CSS 3.

text-overline-style —Describes the style of overline (like underline, but above the text). Declared in CSS 3.

text-overline-width —Describes the width of overline (like underline, but above the text). Declared in CSS 3.

text-underline —Composite property describing underline color, style, mode, and width. Declared in CSS 3.

text-underline-color —Describes the color of underline. Declared in CSS 3.

text-underline-mode —Describes the mode of underline. Declared in CSS 3.

text-underline-style —Describes the style of underline. Declared in CSS 3.

text-underline-width —Describes the width of underline. Declared in CSS 3.

Unsupported Properties Specific to Other Browsers

scrollbar-3dlight-color —Microsoft Internet Explorer property.

scrollbar-arrow-color —Microsoft Internet Explorer property.

scrollbar-darkshadow-color —Microsoft Internet Explorer property.

scrollbar-face-color —Microsoft Internet Explorer property.

scrollbar-highlight-color —Microsoft Internet Explorer property.

scrollbar-shadow-color —Microsoft Internet Explorer property.

scrollbar-track-color —Microsoft Internet Explorer property.

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.

Tweening top: calc() value not working in Safari

• scrollmagic

By ryangiglio May 11, 2016 in GSAP

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly.

The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value.

I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!

See the Pen bpZjpe by ryangiglio ( @ryangiglio ) on CodePen

Link to comment

Share on other sites.

Hello ryangiglio , and Welcome to the GSAP Forum!

Safari & iOS Safari (both 6 and 7) do not support viewport units (vw, vh, etc) in calc() .

So in your case, try not to use viewport units in calc(), since you will have issues in Safari 6 and 7.

This looks like a browser support issue in Safari webkit:

http://caniuse.com/#feat=calc

You could try to use the webkit prefix for calc() .. but it looks like your main issue is using viewport units inside calc() within Safari / iOS Safari

Usually with calc() you need to also use the -webkit prefix which is required for Safari 6 and Chrome 19-25 per the spec?

For example, in a stylesheet it would look like this, having a fallback for calc()

One thing to also take into consideration, as a general rule of thumb when animating elements. Is that you should always animate using x and y instead position offsets of top and left . The reason being is that animating x and y will allow you to animate on a sub-pixel level whereas css position offsets like top, left, bottom, and right only animate on pixel level and will give you choppy animation.

Also your changing CSS properties with jQuery css() method instead of allowing GSAP to apply your css properties. The GSAP equivalent of the jQuery css() method is the GSAP set() method. GSAP is better since it will add prefixes if needed. This way GSAP can keep track of what css properties you are changing. By using jQuery css() you are changing css properties outside of GSAP so it will not know if you change a property outside itself.

Have you seen if this behavior in Safari happens without using ScrollMagic. The reason i ask is that Scroll Magic is made with GSAP, but it is not made by GSAP.

Also you really don't need calc() to achieve what you want, since calc() is just an expression for css inside your stylesheet. But since you are using JS, you can take advantage of doing that same logic with JS expression conditional logic and get the same results cross browser.

So try not use viewport units inside calc() within Safari / iOS Safari and you should be able to still use calc()

Thanks for your really thorough answer! I'm relatively new to GSAP after having done most of my animation/transitions using pure CSS for a long time so I'm not used to thinking outside of the confines of CSS. You're right, it doesn't make sense to use calc() when I can just...calculate the exact pixel value with Javascript. That was a fairly trivial change and it totally worked!

So actually I was a little hasty - problem not totally solved yet...

Now I remember the reason I used calc in the first place - this needs to be vertically responsive. So if the user resizes the height of the browser window after they've loaded the page, the target value of the tween needs to update to reflect that. With calc() that happens automatically, but it doesn't when the value is calculated at page load. Is there a way to update the target value of the tween after it's been created?

In that case you can use the GSAP special property that is part of the GSAP CSSPlugin called yPercent .

So instead of using top , you would use y (translateY) for a smoother sub-pixel animation. But since you want responsive elements, then you would use yPercent instead.

yPercent and xPercent help with animating your elements for responsive animations.

http://greensock.com/gsap-1-13-1

Codepen examples of xPercent and yPercent :  

See the Pen rAetx by GreenSock ( @GreenSock ) on CodePen

See the Pen axzmb by GreenSock ( @GreenSock ) on CodePen

Some notes on using xPercent and yPercent for responsive animation:

• To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts.

I'm having trouble figuring out how to use yPercent to implement this specific calculation, because it's still partly a fixed-pixel value (which is why calc() was my instinct - it lets you mix those kinds of things). Simplifying the variables for the sake of discussion, I'm trying to tween towards y = -window height + 350px. Is this possible with yPercent?

yPercent uses percentages not pixels. So it would be y = -(window height + 350) without the px in your calculation.

Do you have a fork (copy) of your original example then we could help you better by seeing what you have tried, Thanks!

Here's a few iterations that I've tried:

See the Pen WwWbjJ by ryangiglio ( @ryangiglio ) on CodePen

This works perfectly on page load - but if you vertically resize the window the spacing gets thrown off until you refresh

See the Pen MyRwYW by ryangiglio ( @ryangiglio ) on CodePen

It moves them relative to their own height, so -100 tweens them up by 1, -200 up by 2, etc.

I need to know the height of the window dynamically whenever it's resized which only seems to be possible with the vh unit

I'm jumping into this mid-conversation, but couldn't you use a variable to check the window height on load and on resize? Then just use that for any calculations you may need.

I'm not sure if that helps, but thought I'd throw it out there.

Happy tweening.

Thanks for chiming in! That was what I tried originally, before resorting to calc(). As far as I understand, GSAP caches the value you passed when you originally setup the Tween. After that it's just animating in stages between its current state and the original value you gave it, regardless of whether or not that value has changed since you set it up. Here's an explanation as to why that's the case:  http://greensock.com/forums/topic/10332-update-tween-value-while-its-tweening/

Yep, I was thinking the same way PointC was - just use straight JS (like window.innerHeight). 

I certainly wouldn't consider the lack of tweening "calc()" values in GSAP to be a "bug" because it strikes me as impossible to do. How could it animate between dynamically calculated values? What if it starts at "calc(50px + [window height])" and ends at "calc(-100vh + [nav container height] + [2x nav bottom property])"? There are completely different numbers of properties, units, relative values, etc. Sure, we could apply them at the moment the tween starts and use the calculated values but that's not technically accurate. What if someone resized the window DURING the tween? See what I mean? Perhaps I'm missing something, but I'm pretty sure the only way to do this would be to force the use of computed values at a give time (start of the tween) and live with the fact that they wouldn't be dynamic during the tween at all. In other words, it'd convert to something like "235px to 131px" instead. 

If it were me, I'd probably just use JS since it's so dynamic by its very nature and avoid CSS calc() values altogether.

Oh, and if window.innerHeight changes, you just create a new tween the overwrites the old one (or you could manually kill() it). It's pretty trivial to set up a "resize" listener to trigger that. 

Thanks for your input everyone! I appreciate all the thinking here!

I certainly wouldn't consider the lack of tweening "calc()" values in GSAP to be a "bug" because it strikes me as impossible to do. How could it animate between dynamically calculated values?

I definitely don't consider it a bug in GSAP, but I do think it's a bug in Safari based on the fact that it works as expected in Chrome and Firefox. I understand the logical impossibility there so I imagine it's doing something tricky under the hood to return an actual pixel value to anything trying to use/manipulate it and it's just representing it to the dev/user as a calculated value.

This is probably what I need to do - I was thinking it would be a little processor-heavy but I can't imagine resizing the height of the browser to be so common a thing as for that to be a significant bottleneck.

Just to add my two cents. CSS calc() is still listed as experimental, so it's really not ready for prime time due to all the browser bugs and inconsistent calculations within each browser. It will probably be awhile before calc() can be used where it will calculate properly across modern browsers.

While I do realize it's considered experimental, I've used the basic functionality like width: calc(100% - 200px) to stretch the body of a site next to a fixed-sized sidebar and found it to be pretty reliable and well-supported. I'm definitely stretching it beyond its limits here.

CSS calc() can be reliable in some case, but is not reliable in all modern browsers (mobile and desktop), for cross browser compatibility!

The following are known bugs and issues with CSS calc() cross browser.

• IE11 is reported to not support calc() correctly in generated content
• IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently)
• Firefox does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and stroke-dasharray properties. Bug report
• Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().
• IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions) This example does not work: flex: 1 1 calc(50% - 20px);
• IE10 and IE11 don't support using calc() inside a transform. Bug report
• IE 9 - 11 don't render box-shadow when calc() is used for any of the values
• IE11 does not support transitioning values set with calc()
• IE10 crashes when a div with a property using calc() has a child with same property with inherit .

That is why if your using JavaScript there is no need for calc(), since JavaScript is more reliable and faster in its calculations than CSS calc() would be, due to the lack support and non standard behavior.

calc() also has limitations due to the calculation in calc() is based on its immediate parent, not the window. . So you need to make sure that immediate parent does not have position fixed, and has a defined width. So that is why JavaScript is better for calculations if your already using JavaScript.

I only use calc() if i am using CSS variables, but only if i use pixels and / or percentages. If i am using javascript, then there is no need to use calc() due to the limitation of cross browser support.

Regarding window.innerHeight .. There should be no bottleneck for getting the window height In JavaScript, since it is a very common thing, and is very straight forward.

Another suggestion you can do is if you have to have the element with CSS position fixed. Make sure that its first immediate child is an element with CSS position relative. So its children elements are relative to that, instead of your fixed position element. So this way you don't have to deal with that limitation of using calc() on an element who's immediate parent has CSS position fixed, which could affect the calculation.

And another thing when using calc() is that you should always have a fallback for the CSS property that is using calc(). So if it fails the browser can use your fallback

Great stuff sir!

The reason my layout is so finnicky is because I'm trying to make this work (partly for academic reasons) without hard-coding their positions based on nth-child. Since the links are relative positioned inside a fixed position container they can stack naturally while still being stuck to the bottom of the window. If the links were fixed position I would need to manually position each one, which I'd like to avoid.

The following are known bugs and issues with CSS calc() cross browser. IE11 is reported to not support calc() correctly in generated content IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently) Firefox does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and stroke-dasharray properties. Bug report Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc(). IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions) This example does not work: flex: 1 1 calc(50% - 20px); IE10 and IE11 don't support using calc() inside a transform. Bug report IE 9 - 11 don't render box-shadow when calc() is used for any of the values IE11 does not support transitioning values set with calc() IE10 crashes when a div with a property using calc() has a child with same property with inherit .

While that's a pretty long list of bugs, most of them are specific to IE and none of them are really debilitating when you're using its most basic functionality which is why they haven't scared me off. I've used it pretty liberally in layouts and haven't run into an issue..

The bottleneck I was referring to was destroying/recreating the Tween every time the window was vertically resized - there's a lot more processing involved. I'm going to give that a shot regardless and see how it feels - I wouldn't want the position of the thing to be too jumpy during/after a resize.

This ended up being the best solution. There's not too much overhead removing and recreating the tween. Simple is best!

Huge thanks everyone for taking so much time to discuss and explore this issue! I'm relatively new to GSAP and this is a pretty fantastic community.

I understand. .. but if you choose to use calc(), then you are not making your code cross browser to reach a wide range of users. And then your limiting your animations to only those browsers that have partial support for calc().

IE11 is the only version of Internet Explorer for Windows 7, since MS Edge is only available on Windows 10.

My motto is to make work everything cross browser, otherwise your limiting yourself to a CSS property that has limited support cross browser. thats is whats great about javascript and GSAP. You can make your code cross browser and bridge the gap where CSS just doesn't cut it, due to browser support for various CSS properties.

Regarding killing your tweens on resize. You don't have to kill the tween, and recreate it, since you can just invalidate() those recorded values so GSAP can get those new values after resize.

So you could invalidate() the tween and simply restart() the tween

TweenMax.invalidate() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/invalidate/

TimelineMax.invalidate() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/

TimelineMax restart() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/restart/

I didn't know about the invalidate() function - that looks perfect!

I understand. .. but if you choose to use calc(), then you are not making your code cross browser to reach a wide range of users. And then your limiting your animations to only those browsers that have partial support for calc().   IE11 is the only version of Internet Explorer for Windows 7, since MS Edge is only available on Windows 10.

As long as you're sticking to the basics it was originally intended for (my example from before - stretching a content area next to a width-width sidebar), calc() is actually supported all the way back to IE9. Most of the bugs in that list are weird edge cases that wouldn't normally come up in styling a normal website. I've used it on a bunch of sites in the last few years and have never run into an issue.

In this specific case I'm working on an internal tool and I know everyone will be using the most recent versions of Chrome/Firefox/Safari so that's not a concern.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Already have an account? Sign in here.

Recently Browsing    0 members

• No registered users viewing this page.
• Existing user? Sign In
• Leaderboard
• Create New...

CSS fix for 100vh in mobile WebKit

A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units.

One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is too wide, and the presence of that vertical scrollbar triggers a horizontal scrollbar because viewport units don’t have an elegant/optional way of handling that. So you might be hiding overflow on the body when you otherwise wouldn’t need to, for example. ( Demo )

Another scenario involves mobile browsers. You might use viewport units to help you position a fixed footer along the bottom of the screen. But then browser chrome might come up (e.g. navigation, keyboard, etc), and it may cover the footer, because the mobile browser doesn’t consider anything changed about the viewport size.

Matt Smith documents this problem:

And a solution of sorts:

The above was updated to make sure the html element was being used, as we were told Chrome is updating the behavior to match Firefox’s implementation.

Does this really work? […] I’ve had no problems with any of the tests I’ve run and I’m using this method in production right now. But I did receive a number of responses to my tweet pointing to other possible problems with using this (the effects of rotating devices, Chrome not completely ignoring the property, etc.)

It would be better to get some real cross-browser solution for this someday, but I don’t see any issues using this as an improvement. It’s weird to use a vendor-prefixed property as a progressive enhancement, but hey, the world is weird.

Direct Link →

It’s useful to read the linked article’s comments as they go into further tests on this. Also useful to note that the style used here WILL change down the road, so as long as this is considered a “progressive enhancement” as Chris says then fine, but not if you’re relying on this feature.

Personally I can’t wait for the day when we have a simple and reliable CSS fix for the 100vh issue in the vein of this one-liner down the road. The fact that it’s 2020 and we still don’t have a fix for this is ridiculous.

JS but I like Hiswe/vh-check: https://github.com/Hiswe/vh-check

Tested: * Android 10 running Chrome 83.0.4103.106 * iPad Mini 2 running iOS 12.4 * iPhone SE (320 x 568vp) running iOS 13.5

-webkit-fill-available worked like a charm.

I solved this method problem in Chrome and released the hack as a PostCSS plugin https://github.com/postcss/postcss-100vh-fix

It works without JS in all browsers.

I tried it and it seems Chrome and firefox don’t support hyphens in the current versions. both on android as well as windows.

It doesn’t work on iPhone devices when you have a fixed element and keyboard opened. It pushes the element up without resizing the viewport of the element.

[Resolved] Fullwidth area not working in Safari

Home › Forums › Support › [Resolved] Fullwidth area not working in Safari

Popular Articles

• Missing style.css

Updating errors

• Installing GP Premium

Installing GeneratePress

How to add CSS

How to add PHP

Home › Forums › Support › Fullwidth area not working in Safari

• Author Posts

This ist not really a support question. It might be beyond the scope of a support forum. I fully understand if you can’t take the time to answer it. However, since you are so good with CSS, I have some hope. 🙂

I pretty often use fullwidth sections on pages that have a boxed layout like on this page (the large blue section below the grid):

https://www.agoshop.de/

(It is intended that the background does not cover the whole image at the bottom.)

David kindly helped me out with this CSS, which works perfectly fine:

This is the entire CSS for the section:

Now, I’ve just found out that Safari has some problems. It shows a white empty space on the right side like so:

Safari 15 with OS 15 or 10.15 seems to be the only combinations that does not mess up the CSS. In Windows it works fine on pretty much all devices and browsers apart from Internet Explorer. But I couldn’t care less about IE.

Since I don’t have Apple devices, it is very difficult to troubleshoot. Any help would be very much appreciated.

you can try adding: max-width: 100vw; property to your .fullwidth-banner CSS But this CSS Hack is a little bit hit and miss and different browsers on different OSs may have an issue with it. Normally Chromium browsers on Windows has an issue with it.

My personal approach would be to make the Page Full Width, and then contain the sections that i want to keep contained…

Thank you for pointing me in the right direction. It turned out that it’s not the width part causing the trouble, but the background size part. It seems that Safari on desktop and both Chrome and Safari on mobile don’t like this CSS:

background-size: auto calc(100% - 90px);

Removing it removes the problem. I have no idea how to fix this, since the combination of relative and absolute height is needed here to make it fully responsive.

I could probably put the image outside the blue section and do something like this:

Should work, but it’s not very clean CSS, I guess. Would you consider this acceptable?

I think, I’ve just found out what the issue is. Safari and Chrome/iOS seem not to understand the “auto” value in

background-size: auto ...

It seems to work after changing it to:

background-size: 100% calc(100% - 90px);

Is it working correctly now ?

as much as I can see, yes. It seems that the “auto” value for the background size is not working in Safari.

Thats very odd especially as its affecting the container overflow. I may have to do some investigating.

Let me know, if I can help somehow. Unfortunately, troubleshooting is quite tedious for me without any Apple devices. I have to go to the local Apple store for testing the results. Lambdatest does quite a good job for desktop, but is not very reliably for mobile devices.

I’ve just set up two static html pages that contain only the needed HTML and CSS:

This page uses the “auto” value.

This page uses the “100%” value.

According to Lambdatest, only the second page is rendered correctly in Safari.

Yeah – Safari renders it differently to Chrome for sure. Its maintaining aspect ratio of the background. Whereas other browers are stretching them. So hard to say if Safari is wrong or right – as its a different interpretation of the spec.

This light reading ( lol 🙂 ) on the property may provide some insight to what its doing as specs vary across browsers:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#intrinsic_dimensions_and_proportions

and particularly on Gradients:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#working_with_gradients

But it seems you found the solution using 100% instead of auto which is logically correct.

Thank you, David. Interesting. It seems that the combination of auto and a pixel value is not safe. Let alone a combination of auto and calc, I guess. Changing auto to a percentage value was really just trial and error.

These are the pleasures of recreating a design properly that was formerly made using a crappy visual editor. 🙂

I kind of hope for the day that all browsers interpret CSS in the same way. But then we wouldn’t have these amusing anecdotes to keep our web developing fun 🙂

Nice find. Thanks for sharing.

But then we wouldn’t have these amusing anecdotes to keep our web developing fun

Nicely put, David! 🙂

On the other hand, working with CSS has been so much harder 10 years ago. I look at you, Internet Explorer! Nowadays, results are quite consistent, if you avoid cutting edge CSS.

Having said this, Microsoft is still a reliable source of frustration, if you have to create HTML emails that work in Outlook. 🙂

Thanks again for your generous help. This was really a hard nut to crack.

Glad to be of some help 🙂

• You must be logged in to reply to this topic.

Start building better websites today.

GeneratePress

• Site Library
• Brand Assets
• We’re Hiring!
• Documentation
• Support Forums
• Archived Support Forums
• Fastest WordPress Theme
• Install GeneratePress
• Plugin Install Failed
• WordPress Hosting

© 2024 EDGE22 Studios LTD.

CSS calc function not working in Chrome but works in Firefox

100% of what? Does the parent have a defined height? And if that height is a percentage, then does its parent have a defined height and so on

Also, do you have spaces in the actual code ie calc(100% - 6.8rem) rather than calc(100%-6.8rem) (no spaces will break things in certain browsers)

It would probably be best if you gave us the link to the codepen so we could look at the code instead of having to guess what is going on.

I’m actively looking for the actual height of this, but I just dump the code from the FCC project from codepen which works, and it simply just doesn’t work in Chrome, while it works in Firefox, that’s what’s strange to me. I double checked on the calc function, as I did some research myself as well and I’m pretty sure there is proper space in that function call, like you pointed out.

This is my page: https://sythanhho.github.io/ And the repo: https://github.com/sythanhho/sythanhho.github.io

Different algorithm for grid size calculation in the underlying browser rendering code. In Chrome, you’re saying 100% height, but of what? There is no height on the parent, so it’s 100% of nothing, which is nothing. For some reason, FF decided to infer a height automatically when rows are automatically created, whereas Chrome did not. Note that this isn’t specific to grid layout, in all browsers [I think] if you specify height: 100% (for example), it needs to be 100% of some defined height . Grids seem to be the exception in Firefox

I do not disagree with what you said as there’s absolutely no rules for cell height whatsoever in the code so a straight solution is to provide one, which kinda helps. But what still bugs me is this is the soul of the default given code for the project, which is available by FCC in the following codepen:

What exactly have you changed to stop it working? Is it just changing height from auto to 100% (the calc is irrelevant here, it will exhibit the same behaviour regardless). If it works in the FCC example but not in yours, then something has been changed to break it, and if it’s that, then, yes, it will not work, because there is no height on the parent

I have fully explained things and I believe I am not dumb enough to break something that is still working and I hate that I have to manually create a pen, and put codes on it just to prove that I am correct, but here is the exact code I am using offline, put on pen and it works.

I have changed nothing and it’s just that Chrome doesn’t work. I am sorry but you seem to not get my problem.

I confirm again that it is not a problem of either FCC, or mine, Chrome is just not cooperating.

You are missing the HTML boilerplate stuff. Add the HTML you have inside the body. That should fix it for Chrome.

That is the problem with copy-pasting things. On CodePen it is not needed because it gets added.

I get your problem. I’m not trying to be antagonistic here, I just need to know what is different, because your site works in Firefox but does not work in Chrome for the reasons I stated. This was unquivocally why it doesn’t work, it is easy to test: go to computed properties in the inspector on your site, the height is 0px in Chrome. So there has to be a difference that you have not noticed. (And as I’m typing this, @lasjorg has found where the difference in the code is)

Nice catch @lasjorg . Figured it was something simple like that.

As far as copying the FCC template for this project, there are issues with the template that need to be fixed. For example, if you manually increase the text size the text under each project image breaks out of the box. @sythanh14 , I think you are better off starting this from scratch and building it yourself if you really want to learn this stuff.

As far as I can tell it seems related to how Chrome handles quirks mode . If you just remove the doctype ( <!DOCTYPE html> ) it will fall back to BackCompat and the images will be 0 height.

You can check the mode in the browser console.

Not sure which browser is being the most compliant here or what the specs really says about it. But if you run in quirks mode I’d say all bets are off.

Yup my man I am not going to tell people this is my code I am looking at it as an example and a hang to put my stuff on when things are not there yet. I will do everything from 0. But sometimes going bottom-up isn’t very good it just takes a bit of research and sometimes, it might just need a bright eye of @lasjorg . Big lesson this time.

Huge lesson for me this time. Honestly even if I go the hard way I don’t think I could even see this because I don’t think I fully understand what the doctype has to do. I appreciate your help man it’s gonna go in my book. Merci bien!

I cannot explain what I have done in the process it might just not be worth it and might just make me look worse here. I mean, I appreciate the help man. I feel good finally the answer has come.

Can you take a look at this pen please? I have made a new pen by myself and now I have no idea why my first grid tile applies different height to my image, while doing the same for every tile on from the second:

P/S: I actually experimented with my offline code, by removing the div around the anchor. Before, when the div was still there, there was the problem. But when I remove the div and treat the anchors as the grid item, the problem is gone.

So my final question is why does putting a wrapper around the anchor provoke the problem like this? I think I have provided correct box size for the divs. Maybe you’ll have a better look at it.

[I’m assuming this is the reason, not tested] So the grid layout applies to direct children. When you don’t have the wrapper, the children are the anchor elements, and their display property changes from the default inline to be a grid item.

Once you put them inside another element, you haven’t set the display property of the anchor to anything other than its default (inline). You can’t apply height and width to inline elements, and it collapses to the height of the content – the image you’re using is a background image, so it doesn’t affect the height of the element its been applied to, so the content height will be whatever the height of the text is