0

A: width: calc((100% - SOME_INTEGER_NUMBERpx) / 2)

B: width: calc((100%) / 2)

Original style rule of the element is A. When inspecting element with DEV tools (Opera) A style is not marked as invalid but it does not work either.

When changing calc expression to look like B (via DEV tools) element looks as expected.

Update 1: As you can see the bowser likes the expression: it is parsed and is not being overriden enter image description here

Update 2:

Must be an issue of Opera 60.0.3255.151 since other browsers apply CSS rule as expected. Will try another version of Opera and will report shortly. Thx @Ry

Update 3: Same issue when browsing with Opera 58.0.3135.132. Sadly a hack (calc(100% / 2 - 55px / 2)) suggested by someone whose comment/answer is no longer visible does not work either. Issue must be web-app connected

Nico Diz
  • 1,484
  • 1
  • 7
  • 20
user435421
  • 859
  • 2
  • 13
  • 31
  • share full code so we can see that it's not working – Temani Afif Jun 10 '19 at 13:07
  • @TemaniAfif your answer in the duplicate question i think is the answer for this question. – Sfili_81 Jun 10 '19 at 13:13
  • @Sfili_81 the duplicate is about missing spaces which is not the case here. – Temani Afif Jun 10 '19 at 13:15
  • @TemaniAfif i've read better, and it's my bad sorry, i think he miss the nested calc like this _calc( calc(100% - 20px) / 2 )_ but it isn't this case. sorry again. – Sfili_81 Jun 10 '19 at 13:18
  • @TemanAfif what about cross-browser compatibility of using simple parenthesis? I didn't even know that simple parenthesis could be used inside `calc`. I guess you learn something new everyday. – Aayush Sharma Jun 10 '19 at 13:18
  • I’m curious of whether `calc(50% - 27.5px)` works. Also, which version of Opera? Did you try any other browsers? – Ry- Jun 10 '19 at 13:20
  • I tried `width: calc( ( 100% - 51px ) / 2 );` in chromium just now and it worked just fine. – Aayush Sharma Jun 10 '19 at 13:21
  • Here is a working example http://jsfiddle.net/d084pcrm/. I will probably have to dig deep into inner elements but it still bugs me that subtraction intoduces this behaviour – user435421 Jun 10 '19 at 13:23
  • Guess what: in IE it works as expected:D – user435421 Jun 10 '19 at 13:27
  • @Ry introducing decimal point does not help. Using the up-to date Opera – user435421 Jun 10 '19 at 13:30
  • @user435421: Which version of Opera? Did you try any other browsers? – Ry- Jun 10 '19 at 13:32
  • @AayushSharma if a browser support calc() it also support simple parenthesis. Simple parenthesis is not a feature, it's a valid syntax of CSS calc() : https://drafts.csswg.org/css-values-3/#calc-syntax – Temani Afif Jun 10 '19 at 13:43

0 Answers0