#StackBounty: #css #google-chrome #ionic-framework #firefox #computed-style applied CSS rule for opacity is different from the computed…

Bounty: 50

I’m inspecting https://ionicframework.com/docs/api/alert alert..

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
  <script type="module">
    import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
    window.alertController = alertController;
    <ion-header translucent>
    <ion-content fullscreen class="ion-padding">
      <ion-button expand="block">Show Alert</ion-button>

    const button = document.querySelector('ion-button');
    button.addEventListener('click', handleButtonClick);

    async function handleButtonClick() {
      const alert = await alertController.create({
        header: 'Use this lightsaber?',
        message: 'Do you agree to use this lightsaber to do good across the galaxy?',
        buttons: ['Disagree', 'Agree']

      await alert.present();

There is an element there with .alert-wrapper class on it.

if you’ll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
the element i'm inspecting

applied css

computed styles

I tried removing all the CSS Files from the page, all the javascript, all the other elements
I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..

How is this possible?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.